angular - Angular2 form builder with result of asynchronous call -

am creating form following result of asynchronous call stuck @ how should pass results of asynchronous calll form builder

this ive tried

export class performinspectionpage implements oninit {  checklists: any;  inspectionform: formgroup;   ngoninit(): {     this.checklists  = this.ongetitems(); //this fetch data not sure of                                         //another way use.   let checkinputs: formarray = new formarray([]);   (let = 0; < this.checklists.length; i++) {    checkinputs.push(     new formgroup({       description:new formcontrol(this.checklists[i].item),       input: new formcontrol(''),       yesradio: new formcontrol(''),       noradio: new formcontrol(''),     })   ) }  this.inspectionform = this._formbuilder.group({   inputfileds: this._formbuilder.array(checkinputs.controls) })   } 

now function gets items still on same component

 ongetitems(){      return this._inspectionservice.getchecklists()        .subscribe(           res=> {            this.checklists = res;           },         );         } 

when check console.log(this.inspectionform); has array of 0 items. how modify return result asynchronous call

i have tried

  return this._inspectionservice.getchecklists(this.truckparam)   .subscribe(     res=> {       let checkinputs: formarray = new formarray([]);        (let = 0; < this.checklists.length; i++) {         checkinputs.push(        new formgroup({           description:new formcontrol(this.checklists[i].item),            input: new formcontrol(''),            yesradio: new formcontrol(''),           noradio: new formcontrol(''),         })      )     }      this.inspectionform = this._formbuilder.group({        inputfileds: this._formbuilder.array(checkinputs.controls)     })       },    ); 

the problem instance formbuilder never visible on form

that is

on form

 <form [formgroup]="inspectionform" #newform > //this returns error of   formgroup expects formgroup instance. please pass 1 

since you're building form model asynchronously, need display form template asynchronously.

the problem current code (the 2nd option showed) angular tries display form before have built model.

try this:

getchecklists(...)    .subscribe(() => {      // build form model do.     this.inspectionform = this._formbuilder.group({...});      // then, set kind of flag indicate form ready.     this.isformready = true;    }); 

and in template :

<form *ngif="isformready" [formgroup]="inspectionform" #newform> 

in fact, might able skip isformready flag , test value of inspectionform property directly:

<form *ngif="inspectionform" [formgroup]="inspectionform" #newform>