Angular Setting Default Value for a Combobox-CodePudding

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" >
                    <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;
  }
);

CodePudding user response：

 <mat-option [value]="null">''</mat-option>

For more examples please refer to Angular Material documentation

Angular Material MatSelect

CodePudding user response：

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>

CodePudding user response：

Here's how you can define a default option in Mat-Select :

 <mat-form-field appearance="outline" fxFlex="100" fxFlex.gt-xs="30" >
     <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>