title: Loading dynamic Reactive Forms , doesn't wait for the http call to complete
body: <p>I am trying to load a dynamic fields forms based on the input from an http services (which is supposed to provide meta data of what fields to load with what name and type of fields etc). Hence i have to build the formGroup dynamically in <strong>ngOnInit()</strong>  once i receive the http-response with the form meta-data. </p>
  
  <p>When I hard-code this meta-data object and return through an Observable from the data-service, the component dynamically-builds the form in <strong>ngOnInt</strong>, however as soon as i move the call of the data service to live a http service, the page load seems to happen before the http call responds back and hence the form doesn't load the fields. 
  I first get the following error on the console :</p>
  
  <pre><code> ERROR Error: formGroup expects a FormGroup instance. Please pass one in.
  </code></pre>
  
  <p>I have observed that eventually the http-call would have responded (say in just 11milli-seconds) and based on the .subscribe function it creates the formGroup (which is of no use now sine the page is rendered blank without any fields). </p>
  
  <pre><code> formGroup = {};
   data:Array&lt;FormField&gt;;
   form: FormGroup;
   ngOnInit() {
   // dis --&gt; is the data service
   this.dis.getFieldsData().subscribe(respose=&gt;{
       this.data=respose;
       this.objectProps =
          Object.values(this.data)
          .map(prop =&gt; {
            return Object.assign({},{key:prop.name}, prop);
          });
         for(let prop of Object.values(this.objectProps)) {
                       this.formGroup[prop.name] = new FormControl(prop || '', 
                      this.mapValidators(prop.validation));
                     } //below is where the form is assigned the dynamically built  formGroup
                       this.form = new FormGroup(this.formGroup); 
  });
   } 
  </code></pre>