简体   繁体   中英

Angular Material md-select don't show value on prepopulate

I have a nested form, a group inside of a group:

this.formBuilder.group({
        ...
        placeFirst: this.formBuilder.group({valy: ['', Validators.required]}),
        ...
    })

When I want to update the form with prepopulated data:

this.listingForm.get('placeFirst.valy').setValue(listing.placeFirst);

The form is prepopulated because I can see the field filled with the json pipe, but the md-select does not show the title. The HTML is:

<div formGroupName="placeFirst">
  <md-select placeholder="Place" formControlName="valy" (change)="creator.placeFirstSelected($event.value)">
    <md-option *ngFor="let placeFirst of creator.placesFirst" [value]="placeFirst">
      {{placeFirst.title}}
    </md-option>
  </md-select>
</div>

If I use 'select' and 'option' instead of 'md-select' and 'md-option', I can see the title of the current option selected.

As @developer033 said in the comments, the issue is that the object marked as selected and the object from the list are not equal. As the issue is still opened ( github ), my workaround for now is just filtering the list with the keys:

    const placeFirst = this.placesFirst.filter(el => el.key === placeFirstKey)[0];
    this.listingForm.get('placeFirst.valy').setValue(placeFirst);

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM