Angular Setting Default Value for a Combobox

Question

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

user12251399 · Accepted Answer · 2022-03-11 13:13:08Z

1

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

For more examples please refer to Angular Material documentation

Angular Material MatSelect

answered Mar 11, 2022 at 13:13

user12251399

Sign up to request clarification or add additional context in comments.

Comments

abdella · Accepted Answer · 2022-03-11 13:10:07Z

1

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>

answered Mar 11, 2022 at 13:10

abdella

7749 silver badges18 bronze badges

1 Comment

Rocket Monkey Over a year ago

thanks, but that creates a new element in dropdown. I want to set that value to already existing empty field.

spaleet · Accepted Answer · 2022-03-11 13:19:52Z

1

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>

answered Mar 11, 2022 at 13:19

spaleet

9742 gold badges13 silver badges25 bronze badges

Collectives™ on Stack Overflow

Angular Setting Default Value for a Combobox

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related