Angular / material2 - mdSelect - How to display form value as initial value using objects

Ok, I'm trying to create a form component that has mdSelect

that uses parameters that are actually objects.

let's say:

...
export class MyFormComponent implements OnInit {

 showing: boolean = false;
 form: FormGroup;
 options$: Observable<MyModel[]>;

 constructor(
  public fb: FormBuilder,
  public data: MyDataService
 )

 ngOnInit() {
  this.form = fb.group({myField: ['']});
  this.options$ = this.data.fetch();
 }

 editRecord(record: any) {
   this.form.patchValue(record);
   this.showing = true;
 }

}

      

here the values ​​are taken:

fetch(search?: URLSearchParams): Observable<Response> {
 return this.http.request({
  method: RequestMethod.Get,
  url: this.getEndpoint(),
  search: search
 });
}

      

and my html:

<div class="myForm">
  <md-select placeholder="Choose one" formControlName="myField">
    <md-option *ngFor="let opt of options$ | async" [value]="opt">{{opt.someInnerField}}</md-option>
  </md-select>
</div>

      

When this component of mine is used to insert a new record, it works correctly, but when I call editRecord()

, mdSelect

does not display myField.someInnerField

, it does not show anything as if it were empty

+3


source to share





All Articles