projects/ng-dynamic-forms/ui-ngx-bootstrap/src/lib/select/dynamic-ngx-bootstrap-select.component.ts
selector | dynamic-ngx-bootstrap-select |
templateUrl | ./dynamic-ngx-bootstrap-select.component.html |
Properties |
Methods |
Inputs |
Outputs |
constructor(layoutService: DynamicFormLayoutService, validationService: DynamicFormValidationService)
|
|||||||||
Parameters :
|
formLayout | |
Type : DynamicFormLayout
|
|
group | |
Type : FormGroup
|
|
layout | |
Type : DynamicFormControlLayout
|
|
model | |
Type : DynamicSelectModel<string>
|
|
blur | |
Type : EventEmitter<any>
|
|
change | |
Type : EventEmitter<any>
|
|
focus | |
Type : EventEmitter<any>
|
|
getClass | ||||||||||||||||
getClass(context: DynamicFormControlLayoutContext, place: DynamicFormControlLayoutPlace, model: DynamicFormControlModel)
|
||||||||||||||||
Inherited from
DynamicFormControlComponent
|
||||||||||||||||
Defined in
DynamicFormControlComponent:73
|
||||||||||||||||
Parameters :
Returns :
string
|
onBlur | ||||||
onBlur($event: any)
|
||||||
Inherited from
DynamicFormControlComponent
|
||||||
Defined in
DynamicFormControlComponent:82
|
||||||
Parameters :
Returns :
void
|
onChange | ||||||
onChange($event: any)
|
||||||
Inherited from
DynamicFormControlComponent
|
||||||
Defined in
DynamicFormControlComponent:92
|
||||||
Parameters :
Returns :
void
|
onCustomEvent | ||||||||||||||||
onCustomEvent($event: any, type: string | null, bypass: boolean)
|
||||||||||||||||
Inherited from
DynamicFormControlComponent
|
||||||||||||||||
Defined in
DynamicFormControlComponent:101
|
||||||||||||||||
Parameters :
Returns :
void
|
onFocus | ||||||
onFocus($event: any)
|
||||||
Inherited from
DynamicFormControlComponent
|
||||||
Defined in
DynamicFormControlComponent:113
|
||||||
Parameters :
Returns :
void
|
Private _hasFocus |
Default value : false
|
Inherited from
DynamicFormControlComponent
|
Defined in
DynamicFormControlComponent:21
|
blur |
Type : EventEmitter<any>
|
Inherited from
DynamicFormControlComponent
|
Defined in
DynamicFormControlComponent:29
|
change |
Type : EventEmitter<any>
|
Inherited from
DynamicFormControlComponent
|
Defined in
DynamicFormControlComponent:30
|
customEvent |
Type : EventEmitter<DynamicFormControlCustomEvent>
|
Inherited from
DynamicFormControlComponent
|
Defined in
DynamicFormControlComponent:31
|
focus |
Type : EventEmitter<any>
|
Inherited from
DynamicFormControlComponent
|
Defined in
DynamicFormControlComponent:32
|
formLayout |
Type : DynamicFormLayout
|
Inherited from
DynamicFormControlComponent
|
Defined in
DynamicFormControlComponent:23
|
group |
Type : FormGroup
|
Inherited from
DynamicFormControlComponent
|
Defined in
DynamicFormControlComponent:24
|
layout |
Type : DynamicFormControlLayout
|
Inherited from
DynamicFormControlComponent
|
Defined in
DynamicFormControlComponent:25
|
model |
Type : DynamicFormControlModel
|
Inherited from
DynamicFormControlComponent
|
Defined in
DynamicFormControlComponent:26
|
templates |
Type : DynamicFormControlTemplates
|
Inherited from
DynamicFormControlComponent
|
Defined in
DynamicFormControlComponent:27
|
import { Component, EventEmitter, Input, Output } from "@angular/core";
import { FormGroup } from "@angular/forms";
import {
DynamicFormControlComponent, DynamicFormControlLayout,
DynamicFormLayout,
DynamicFormLayoutService,
DynamicFormValidationService,
DynamicSelectModel
} from "@ng-dynamic-forms/core";
@Component({
selector: "dynamic-ngx-bootstrap-select",
templateUrl: "./dynamic-ngx-bootstrap-select.component.html"
})
export class DynamicNGxBootstrapSelectComponent extends DynamicFormControlComponent {
@Input() formLayout: DynamicFormLayout;
@Input() group: FormGroup;
@Input() layout: DynamicFormControlLayout;
@Input() model: DynamicSelectModel<string>;
@Output() blur: EventEmitter<any> = new EventEmitter();
@Output() change: EventEmitter<any> = new EventEmitter();
@Output() focus: EventEmitter<any> = new EventEmitter();
constructor(protected layoutService: DynamicFormLayoutService,
protected validationService: DynamicFormValidationService) {
super(layoutService, validationService);
}
}
<ng-container [formGroup]="group">
<select class="form-control"
[class.is-invalid]="showErrorMessages"
[compareWith]="model.compareWithFn"
[formControlName]="model.id"
[id]="id"
[name]="model.name"
[ngClass]="getClass('element', 'control')"
[required]="model.required"
[tabindex]="model.tabIndex"
(blur)="onBlur($event)"
(change)="onChange($event)"
(focus)="onFocus($event)">
<option *ngFor="let option of model.options$ | async"
[disabled]="option.disabled"
[ngValue]="option.value">{{ option.label }}</option>
</select>
</ng-container>