angular - Angular4 Form Builder dynamic -

i'm working on angular(4) on rails app, , trying finish crud functionality. i'm stuck on how handle 'edit' in terms of front-end.

i've tested logic manually putting when button clicked, i'm struggling form pre-populate.

the proposed flow

• user clicks clients performs getclients() function.
• clients page has clickable id each client go clients/:id page.
• clients/:id performs getclientbyid() function passing in params['id']
• form pre-populated information
• when submitted editclientbyid ran

my component

@component({   selector: 'app-client-index',   templateurl: './client-index.component.html',   styleurls: ['./client-index.component.sass'] }) export class clientindexcomponent implements oninit {   constructor(private clientservice: clientservice,               private activatedroute: activatedroute,               private fb: formbuilder   ) { }   public indexform: formgroup;   public submitted: boolean;   public events: any[] = [];   client = client;    ngoninit() {     this.activatedroute.params.subscribe((params: params) => {       let id = params['id'];       this.clientservice.getclientbyid(params['id']);       this.indexform = new formgroup({         name: ['', <any>validators.required],         status: [''],         logo: ['']     });     }   }     edit(model: client,  isvalid: boolean) {     this.submitted = true;      console.log(model, isvalid);   }      // demo(){   //   console.log('pressed');   //   this.clientservice.editclientbyid({   //     'id': 4,   //     'name': 'demo user2222',   //     'status': 'this',   //     'logo': "test"   //   })   // }  } 

service

  getclientbyid(id): observable<client> {     return this.authtoken.get('clients/' + id)       .map(res => res.json())       .catch((error: any) => observable.throw(error.json().error || 'server error'));   }     editclientbyid(client:any): observable<client> {     return this.authtoken.patch('clients/' + client.id, client)       .map(res => res.json())       .catch((error: any) => observable.throw(error.json().error || 'server error'));   } 

the current ngoninit function i'm trying based on couple articles , scotch tutorials i've seen. far closest have gotten submit button patching api, did not pre-populate field.

my current setup, not working @ all. i'm wondering if it's because getclientbyid running before ngoninit finished loading, or if it's functioning @ all.

i believe need bind model, somehow, unsure how.

you need subscribe result of calling getclientbyid on service, take result , use patchvalue put retrieved client object's fields form fields.

build form first, subscribe result of service call:

e.g. (just typed this, not tested...)

this.indexform = new formgroup({         name: ['', <any>validators.required],         status: [''],         logo: [''] ); this.clientservice.getclientbyid(params['id']).subscribe(client => {     this.indexform.patchvalue({  name: client.name,  status: client.status,  logo: client.logo });