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
angular typescript angular-material


source to share


No one has answered this question yet

Check out similar questions:

349
Binding select element to object in Angular
277
access key and object value using * ngFor
273
How can I get a new selection in "select" in Angular 2?
265
In Angular, how do you determine the active route?
4
Submit form in Angular4 and Material2
2
corner material2 data table component
2
Access-Control-Allow-Origin header field not allowed by Access-Control-Allow-Headers in preflight response
1
How can I display a FormArray from a group list?
1
Nested Forms in Angular 2 JS (RC4 and Newer)
0
Corner material2 Load MdDialog at the end



All Articles
Loading...
X
Show
Funny
Dev
Pics