Angular Material mat-select is not refreshing after setting a value

Question

I am trying to create an Angular Form to edit a record. User is brought to this edit form from the list of records page. While loading the form, wanted to populate the record fetched from API to the form elements. Using patchValue method in ngOnInit lifecycle method.

After patching the form control variable, the value of that mat-select element is having a setValue of the one being populated. However, in the screen, it is not getting refreshed. This same mechanism is working perfectly fine if it is Text Input component instead of mat-select.

HTML code is like this:

    <form [formGroup]="propertyProfileDetailsForm" autocomplete="off" novalidate (ngSubmit)="savePropertyProfile(propertyProfileDetailsForm.value)" fxLayout="column wrap"
      fxLayoutAlign="center center" fxLayoutGap="10px">

      <mat-card-content>

          <mat-form-field appearance="fill" class="add-gap">
            <mat-label>Building Type</mat-label>
            <mat-select formControlName="buildingType">
              <mat-option value="1">Independent House</mat-option>
              <mat-option value="2">Residential Apartment</mat-option>
              <mat-option value="3">Independent Building</mat-option>
              <mat-option value="4">Shared Commercial Building</mat-option>
            </mat-select>
          </mat-form-field>
...
...
      </mat-card-content>

      </form>

And my component.ts file:

export class PropertyProfileDetailsComponent implements OnInit {

  isUpdate:boolean = true;
  propertyId:any;
  propertyProfile:PropertyProfile;
  propertyProfileDetailsForm:FormGroup = new FormGroup({
    propertyProfileId: new FormControl(0),
    buildingType: new FormControl(0),
    buildingCondition: new FormControl(0),
    buildingRenowatedIn: new FormControl(''),
  });

  constructor(
    private repoService: RepositoryService,
    private route: ActivatedRoute,
    private errorService: ErrorHandlerService,
    ) { }

  ngOnInit(): void {
    this.propertyId = this.route.snapshot.paramMap.get(this.routeParameterName);
    this.getPropertyProfileByPropertyId(this.propertyId);

    this.repoService.profileEditEmitter.subscribe(() => {
      this.getPropertyProfileByPropertyId(this.propertyId);
      });
  }

  private getPropertyProfileByPropertyId(property_id:number) {
    this.repoService.getData('pprofile/property/'+property_id)
    .subscribe((res:any) => {
      this.propertyProfile = res.response;
      this.isUpdate = (res.response === null && res.code === '000') ? false : true;
      this.patchFormData();
    },
    (error) => {
      console.warn(error);
      this.errorService.handleError(error);
    });
  }

private patchFormData(){
    console.warn(this.propertyProfile)
    if (null !== this.propertyProfile) {
      console.log('coming here....!!!')
      this.propertyProfileDetailsForm.patchValue({
        propertyProfileId: this.propertyProfile.propertyProfileId,
        buildingType: this.propertyProfile.buildingType,
        buildingCondition: this.propertyProfile.buildingCondition,
        buildingRenowatedIn: this.propertyProfile.buildingRenowatedIn,
      });
      console.warn(this.propertyProfileDetailsForm.get('buildingType').value);
     // This console message is printing the value fetched from API, but it is not refreshing.
  }

}

Appreciate any help, I am a novice in Angular & learning by myself thru videos. Please feel free to point out if I am making some silly mistakes.

What is the value of buildingType ? I mean make sure it is string — Kenny
value="1" means its value is a string. If it's a number, use [value]="1" — Gérôme Grignon

Kenny Kenny · Accepted Answer · 2020-08-15T13:56:53

I am pretty sure, the value you are getting from API is in integer/number type.

As your should be in String type. As you have mentioned string in HTML

You can do something like this

buildingType: this.propertyProfile.buildingType.toString();

Refer/play with the following stackblitz for more understanding

https://stackblitz.com/edit/angular-wiccq5-kejehv

Angular Material mat-select is not refreshing after setting a value

1 Answers