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);