how to keep a value selected in mat-select angular 5

Question

I had used a mat-select component in my project, for which the code is:

        <div class="col-md-6">
      <mat-form-field>
        <mat-select placeholder="Select Job" formControlName="job_instruction_id" [(value)]="jifId">
          <mat-option *ngFor="let jif of jifList" [value]="jif.id">
            {{jif.id}}.....{{ jif.jif_no }} ---- {{ jif.job_name }}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>

the jifId holds value 1 at the moment, and the mat option values are 1 and 2, but still the first option is not pre selected when the page loads.

while initialize your reactive form, initialize `job_instruction_id` with value of `1`(mention the data type). — Pengyy, Jun 06 '18 at 04:23
This might [help](https://stackoverflow.com/questions/50650790/set-default-option-in-mat-select/50651134#50651134) — Vikas, Jun 06 '18 at 05:39

score 3 · Accepted Answer · edited Jun 06 '18 at 06:06

3

You need to use [(ngModel)]

<mat-select placeholder="Select Job" formControlName="job_instruction_id" [(ngModel)]="jifId">
          <mat-option *ngFor="let jif of jifList" value={{jif.id}}>
            {{jif.id}}.....{{ jif.jif_no }} ---- {{ jif.job_name }}
        </mat-option>
</mat-select>

edited Jun 06 '18 at 06:06

Atul Stha

1,404
8
23
46

answered Jun 06 '18 at 04:12

Sajeetharan

216,225
63
350
396

score 1 · Answer 2 · answered Jun 06 '18 at 04:15

1

Since you are using form Control use the setValue option from the component.

this.form.controls['job_instruction_id'].setValue(this.jifId);

answered Jun 06 '18 at 04:15

Sachila Ranawaka

39,756
7
56
80

how to keep a value selected in mat-select angular 5

2 Answers2