src/lib/dynamic-form-input/dynamic-form-select/dynamic-form-select.component.ts
DynamicFormInputBase
| selector | bs-dynamic-form-select |
| templateUrl | ./dynamic-form-select.component.html |
constructor(validationService: DynamicFormValidationService)
|
||||||
|
Parameters :
|
import { Component } from '@angular/core';
import { DynamicFormInputBase, DynamicFormSelect, DynamicFormValidationService } from '@dynamic-forms/core';
@Component({
selector: 'bs-dynamic-form-select',
templateUrl: './dynamic-form-select.component.html',
})
export class BsDynamicFormSelectComponent extends DynamicFormInputBase<DynamicFormSelect> {
constructor(protected override validationService: DynamicFormValidationService) {
super(validationService);
}
}
<ng-container *ngIf="!input.multiple; else optionsMultiple">
<select class="form-select" [id]="inputId" [required]="validation?.required" [formControl]="control">
<option [value]="null" hidden>{{ input.placeholder }}</option>
<ng-container *ngFor="let option of input.options">
<ng-container *ngIf="!option.items; else optionGroup">
<option [value]="option.value" [disabled]="option.disabled">{{ option.label }}</option>
</ng-container>
<ng-template #optionGroup>
<optgroup [label]="option.label" [disabled]="option.disabled">
<option *ngFor="let optionItem of option.items" [value]="optionItem.value" [disabled]="optionItem.disabled">{{
optionItem.label
}}</option>
</optgroup>
</ng-template>
</ng-container>
</select>
</ng-container>
<ng-template #optionsMultiple>
<select class="form-select" [id]="inputId" [required]="validation?.required" [formControl]="control" multiple>
<ng-container *ngFor="let option of input.options">
<ng-container *ngIf="!option.items; else optionGroup">
<option [value]="option.value" [disabled]="option.disabled">{{ option.label }}</option>
</ng-container>
<ng-template #optionGroup>
<optgroup [label]="option.label" [disabled]="option.disabled">
<option *ngFor="let optionItem of option.items" [value]="optionItem.value" [disabled]="optionItem.disabled">{{
optionItem.label
}}</option>
</optgroup>
</ng-template>
</ng-container>
</select>
</ng-template>