0

Can someone help me set the values of a model driven form for data coming through http.

Here is the excerpt from service.ts

getExternalConnection(row_id){

  return this._http.get(this._url + '/' + row_id)
    .map(res=> res.json());

}

Here is the excerpt from component.ts

 constructor(private _externalConnectionListService:        ExternalConnectionListService,
  private _route: ActivatedRoute, fb: FormBuilder
) {
  this.externalConnectionForm = fb.group({
    row_id : [''],
    name: ['', Validators.required]
  });
}
ngOnInit(): void {

this.id = this._route.snapshot.params["row_id"];
this._externalConnectionListService.getExternalConnection(this.id)
  .subscribe( res=> {this.data = res;
   this.externalConnectionForm.patchValue(this.data);
   });

With this code I dont see any initial values in the form. However if I replace this.data in patchValue call manually with the entire string returned by the observable after removing the square brackets [], the form is populated fine.

How do I deal with this? This means patchValue is working fine, it just does not like the format of the input from this.data.

sv16
  • 125
  • 3
  • 7
  • Why don't you see initial values? – Roman C Dec 04 '16 at 18:29
  • I do if I manually pass a string with this format {"row_id":1,"name":"database"}. But it seems the value from observable in this.data has the array wrapper square brackets [] and in that case the patchValue does not work. My question is how do I transform this.data to the format patchValue expects. – sv16 Dec 05 '16 at 02:16
  • if the data is in the correct format you could just do `this.data[0]` to get what would be the entire data set and use that. You might also have to do a JSON.parse on it if you are returning the response as a string. – peppermcknight Dec 05 '16 at 15:24

0 Answers0