0
169
ViewsAngular Setting Default Value for a Combobox
In my code, I have an input field in the form of a dropdown. The dropdown has 5 options(empty, 1, 2, 3, 4). Options 1,2,3 and 4 comes from the database and in UI, I want to set the input value as 0 when I choose the empty option. Here is my code and a screenshot. What should I do to set that empty field as 0?
HTML:
<mat-form-field appearance="outline" fxFlex="100" fxFlex.gt-xs="30" class="w-100-p">
<mat-label>Dönem Hafta</mat-label>
<mat-select formControlName="PlanWeek">
<mat-option *ngFor="let week of weekList" [value]="week.Id">
{{week.Name}}
</mat-option>
</mat-select>
</mat-form-field>
TS:
_productionService.onWeekListChanged.subscribe(
(response: IBasicModel[]) => {
this.weekList = response;
}
);
·
Juan Pablo Isaza
3 answers
Answer question0
you can create one option element and simply bind to 0. The other option is to iterate and bind values from the database.
<mat-option value="0"></mat-option>
<mat-option *ngFor="let item of items" [value]="item.id">{{item.name}}</mat-option>
·
Juan Pablo Isaza
Report
0
<mat-option [value]="null">''</mat-option>
For more examples please refer to Angular Material documentation
·
Juan Pablo Isaza
Report
0
Here's how you can define a default option in Mat-Select :
<mat-form-field appearance="outline" fxFlex="100" fxFlex.gt-xs="30" class="w-100-p">
<mat-label>Dönem Hafta</mat-label>
<mat-select formControlName="PlanWeek">
<mat-option [value]="0">default</mat-option>
<mat-option *ngFor="let week of weekList" [value]="week.Id">
{{week.Name}}
</mat-option>
</mat-select>
</mat-form-field>
·
Juan Pablo Isaza
Report
Answer question