Angular Mat-Select not selecting stored value

Question

I am using angular 8, angular material and reactive forms.

My form is using a mat-select and getting its options from an array. When I create a new object it works fine and the options are displayed as expected. However, when editing this object (using the same form) it is not grabbing the object value for some reason.

For example: I have a doctor array with id, firstName and lastName.

{
  id: 4,
  firstName: Jimmy,
  lastName: Jones
}

The mat-form-field looks like this:

<form fxLayout="column" [formGroup]="patientForm">
<mat-form-field appearance="outline" fxFlex>
  <mat-label>Doctor</mat-label>
  <mat-icon matSuffix class="secondary-text">developer_board</mat-icon>
  <mat-select formControlName="doctor" placeholder="Select Doctor">
    <mat-option *ngFor="let doc of doctors" [value]="doc.id">
      {{doc.first_name}}{{doc.last_name}}
    </mat-option>
  </mat-select>
</mat-form-field>
</form>

My TS file

...
doctors: Doctor[];
constructor() {
        // Set the defaults
        this.action = _data.action;

        if (this.action === 'edit') {
            this.dialogTitle = 'Edit Patient';
            this.patient = _data.patient;
        }
        else {
            this.dialogTitle = 'New Patient';
            this.patient = new Patient({});
        }

        this._doctorsService.getDoctors().then(
            doctors => this.doctors = doctors
        );

        this.patientForm = this.createPatientForm();
}


createPatientForm(): FormGroup {
    return this._formBuilder.group({
        id: [this.patient.id],
        doctor: [this.patient.doctor]
    });
}

The issue is that I want this field to select the doctor with the ID 4 on load but it is not showing any selection at all (just showing the placeholder). The doctor is in the list it is just not being selected by default.

I am sure this is something silly that i am doing but any help would be appreciated.

Thanks, jAC

Hi @TheGrandJ i have tried removing the .id but i still have the same issue where it is not selecting the value that is in the object being passed. — jAC
@JohnPeters unfortunately that does not help as i am using reactive forms. — jAC

Zulqarnain Jalil Zulqarnain Jalil · Accepted Answer · 2020-09-15T08:57:54

Mat-Select have value property you can use this property to set a default value like this

<mat-select formControlName="doctor" placeholder="Select Doctor" [(value)]="selectValue">
  <mat-option *ngFor="let doc of doctors" [value]="doc.id">
   {{doc.first_name}}{{doc.last_name}}
  </mat-option>
</mat-select>

you can change your selection like this by assigning id to selectValue variable

please click here for live example

Angular Mat-Select not selecting stored value

2 Answers