packages/ui/src/lib/form/default-input/default-input.component.ts
This component holds the templates for all basic field types.
| styleUrls | ./default-input.component.scss |
| templateUrl | ./default-input.component.html |
Properties |
|
Methods |
constructor(formService: FormService, keycommands: KeycommandsService)
|
|||||||||
|
Injects the services.
Parameters :
|
| focus | ||||||
focus(focus)
|
||||||
|
Parameters :
Returns :
void
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Returns :
void
|
| Public control |
Type : FormControl
|
|
The form control that is used |
| Public field |
Type : Field
|
|
The field for which the input is meant. |
| focusEvent |
Type : EventEmitter<boolean>
|
Default value : new EventEmitter()
|
|
Emitter to focus the input field |
| Public formService |
Type : FormService
|
| Public group |
Type : FormGroup
|
|
The form group that is used |
| Public item |
Type : Item<any>
|
|
The item that is targeted by the input |
| Public keycommands |
Type : KeycommandsService
|
import { Component, EventEmitter, AfterViewInit, OnChanges } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { Field, Item } from '@ec.components/core';
import { Focus } from '../../utility/focus/focus.interface';
import { FormService } from '../form.service';
import { KeycommandsService } from '../../utility/keycommands/keycommands.service';
/** This component holds the templates for all basic field types. */
@Component({
templateUrl: './default-input.component.html',
styleUrls: ['./default-input.component.scss'],
})
export class DefaultInputComponent implements AfterViewInit, Focus {
/** The field for which the input is meant. */
public field: Field;
/** The item that is targeted by the input */
public item: Item<any>;
/** The form group that is used */
public group: FormGroup;
/** The form control that is used */
public control: FormControl;
/** Emitter to focus the input field */
focusEvent: EventEmitter<boolean> = new EventEmitter();
/** Injects the services. */
constructor(public formService: FormService, public keycommands: KeycommandsService) {}
ngAfterViewInit() {
if (this.field && this.field.autofocus) {
this.focus();
}
}
focus(focus = true) {
setTimeout(() => {
this.focusEvent.emit(focus);
}, 100);
}
}
<div [ngSwitch]="field.getView('input')" *ngIf="group" [formGroup]="group" class="ec-input">
<input
[id]="field.id"
*ngSwitchCase="'string'"
type="text"
[formControl]="control"
[placeholder]="field.getPlaceholder()"
class="input"
[ecFocus]="focusEvent"
/>
<textarea
[id]="field.id"
*ngSwitchCase="'textarea'"
type="text"
[formControl]="control"
[placeholder]="field.getPlaceholder()"
class="input"
[ecFocus]="focusEvent"
></textarea>
<input
[id]="field.id"
*ngSwitchCase="'number'"
type="number"
[formControl]="control"
[placeholder]="field.getPlaceholder()"
class="input"
[ecFocus]="focusEvent"
/>
<div class="ec-input-color" *ngSwitchCase="'color'">
<div class="ec-input-color__preview" [style.backgroundColor]="control.value">
<input [id]="field.id" type="color" [value]="group.value[field.property]" [formControl]="control" />
</div>
<input
type="text"
[formControl]="control"
[value]="group.value[field.property]"
[placeholder]="field.getPlaceholder()"
class="input"
/>
</div>
<label *ngSwitchCase="'boolean'">
<input [id]="field.id" type="checkbox" [formControl]="control" />
{{ field.getPlaceholder() }}
</label>
<input
[id]="field.id"
*ngSwitchCase="'email'"
type="email"
[formControl]="control"
[placeholder]="field.getPlaceholder()"
class="input"
[ecFocus]="focusEvent"
/>
<input
[id]="field.id"
*ngSwitchCase="'url'"
type="url"
[formControl]="control"
[placeholder]="field.getPlaceholder()"
class="input"
[ecFocus]="focusEvent"
/>
<ec-toggle [id]="field.id" *ngSwitchCase="'toggle'" [formControl]="control" [placeholder]="field.getPlaceholder()">
</ec-toggle>
<ec-datetime *ngSwitchCase="'date'" [formControl]="control" [placeholder]="field.getPlaceholder()"></ec-datetime>
<ec-period *ngSwitchCase="'period'" [formControl]="control" [disableTime]="false" [placeholder]="field.getPlaceholder()"></ec-period>
<ec-period *ngSwitchCase="'period-date'" [formControl]="control" [disableTime]="true" [placeholder]="field.getPlaceholder()"></ec-period>
<ec-datetime
*ngSwitchCase="'date-only'"
[formControl]="control"
[placeholder]="field.getPlaceholder()"
[disableTime]="true"
[dateOnly]="true"
></ec-datetime>
<div *ngSwitchCase="'select'">
<select
[id]="field.id"
[formControl]="control"
[ecFocus]="focusEvent"
(change)="control.patchValue($event.target.value)"
class="input"
*ngIf="!formService.isReadOnly(field, item)"
>
<option>{{ field.getPlaceholder() }}</option>
<option
*ngFor="let option of field.values"
[selected]="control.value === (option.value ? option.value : option)"
[value]="option.value ? option.value : option"
>
{{ option.label ? option.label : option }}
</option>
</select>
<input type="text" [formControl]="control" [id]="field.id" class="is-hidden-input" />
{{ formService.isReadOnly(field, item) ? field.display() : '' }}
</div>
<div *ngSwitchCase="'copy'">
<div
*ngIf="!!item?.display(field.property)"
class="tag"
style="cursor: pointer"
(click)="keycommands.copyToClipBoard(item?.transform('copy', field.property), field.getLabel())"
[attr.data-tooltip-bottom]="'click to copy ' + field.getLabel()"
>
{{ item?.display(field.property) }}
</div>
</div>
<div *ngSwitchCase="'none'">
<marquee>🚂🚃🚃🚃 {{ field?.type }} has no input yet. </marquee>
</div>
<div *ngSwitchDefault>
<ec-output [field]="field" [item]="item"></ec-output>
</div>
<ec-input-errors [control]="group.get(field.property)"></ec-input-errors>
</div>
./default-input.component.scss
:host {
flex: 1;
}