File

projects/ng-dynamic-forms/ui-ngx-bootstrap/src/lib/select/dynamic-ngx-bootstrap-select.component.ts

Extends

DynamicFormControlComponent

Metadata

selector dynamic-ngx-bootstrap-select
templateUrl ./dynamic-ngx-bootstrap-select.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(layoutService: DynamicFormLayoutService, validationService: DynamicFormValidationService)
Parameters :
Name Type Optional
layoutService DynamicFormLayoutService No
validationService DynamicFormValidationService No

Inputs

formLayout
Type : DynamicFormLayout
group
Type : FormGroup
layout
Type : DynamicFormControlLayout
model
Type : DynamicSelectModel<string>

Outputs

blur
Type : EventEmitter<any>
change
Type : EventEmitter<any>
focus
Type : EventEmitter<any>

Methods

getClass
getClass(context: DynamicFormControlLayoutContext, place: DynamicFormControlLayoutPlace, model: DynamicFormControlModel)
Parameters :
Name Type Optional Default value
context DynamicFormControlLayoutContext No
place DynamicFormControlLayoutPlace No
model DynamicFormControlModel No this.model
Returns : string
onBlur
onBlur($event: any)
Parameters :
Name Type Optional
$event any No
Returns : void
onChange
onChange($event: any)
Parameters :
Name Type Optional
$event any No
Returns : void
onCustomEvent
onCustomEvent($event: any, type: string | null, bypass: boolean)
Parameters :
Name Type Optional Default value
$event any No
type string | null No null
bypass boolean No false
Returns : void
onFocus
onFocus($event: any)
Parameters :
Name Type Optional
$event any No
Returns : void

Properties

Private _hasFocus
Default value : false
blur
Type : EventEmitter<any>
change
Type : EventEmitter<any>
customEvent
Type : EventEmitter<DynamicFormControlCustomEvent>
focus
Type : EventEmitter<any>
formLayout
Type : DynamicFormLayout
group
Type : FormGroup
layout
Type : DynamicFormControlLayout
model
Type : DynamicFormControlModel
templates
Type : DynamicFormControlTemplates
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>
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""