setting mat-option value reactive form

Question

I am using reactive form and my form field loks like below.

<mat-form-field>
   <mat-select  placeholder="Select District" formControlName="district" required>
       <mat-option
           *ngFor="let district of districts"
            [value]="district.districtID" >
           {{ district.districtID}} - {{ district.districtName}} 
       </mat-option>
   </mat-select>
</mat-form-field>

I am updating district field value using patchValue in activatedRoute

this.activatedRoute.queryParams.subscribe(    
    params => {
         this.myForm.controls['district'].setValue(params['district']);
})

the problem is it is setting the value to district formcontrol,but the mat-select is still showing placeholder.

Fabian Küng Fabian Küng · Accepted Answer · 2019-05-03T08:02:35

You are binding the districtID property as the value of your mat-select / mat-option in your template, but you are trying to bind the complete district object with setValue.

Change this line

this.myForm.controls['district'].setValue(params['district']);

to

this.myForm.controls['district'].setValue(params['district'].districtID);

Check out this stackblitz. I have commented the wrong implementation, so you can easily switch between the two and see that it works if you bind the distrcitID.

setting mat-option value reactive form

1 Answers