Загрузка динамических реактивных форм, не дожидаясь завершения http-вызова

Я пытаюсь загрузить формы динамических полей на основе ввода от служб http (которые должны предоставлять метаданные о том, какие поля загружать, с каким именем и типом полей и т. Д.). Следовательно, я должен динамически создавать formGroup в ngOnInit (), как только я получаю http-ответ с метаданными формы.

Когда я жестко кодирую этот объект метаданных и возвращаюсь через Observable из службы данных, компонент динамически строит форму в ngOnInt, однако, как только я перемещаю вызов службы данных для работы службы http загрузка страницы, по-видимому, происходит до того, как HTTP-вызов отвечает, и, следовательно, форма не загружает поля. Сначала на консоли появляется следующая ошибка:

 ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

Я заметил, что в конечном итоге http-вызов ответил бы (скажем, всего за 11 миллисекунд) и на основе функции .subscribe он создает formGroup (который сейчас бесполезен, так как страница отображается пустой без каких-либо полей).

 formGroup = {};
 data:Array<FormField>;
 form: FormGroup;
 ngOnInit() {
 // dis --> is the data service
 this.dis.getFieldsData().subscribe(respose=>{
     this.data=respose;
     this.objectProps =
        Object.values(this.data)
        .map(prop => {
          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); 
});
 }