I am struggling with mat-select and options in an Angular 6 project.
My use case is as follows:
I want to have a list of organizations drop down and save the selected organization (full object, not just the name)
- formControlName should be an object as i want to store the complete object on save with all of its properties - WORKING
- options are populated as an observable with the full object but displays only the name property - WORKING
- When loading the form i want to display the name of the organization that had been previously selected. - NOT WORKING
Everything works correctly except it shows blank value i.e. the options display all the organisations, when i select and organisation and save the full organization object is saved, but when i first load the form i want it show the name of the organisation previously selected and saved.
All of the posts i can seem to find are just working with a simply property not an object.
See Code Below (hope that makes sense). Any suggestions / guidance appreciated
<div [formGroup]="orderForm">
<mat-form-field>
<mat-label>Select Customer</mat-label>
<mat-select formControlName="customer">
<mat-option *ngFor="let organization of (organizations$| async)"
[value]="organization">
{{ organization.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>