Угловые динамические формы не отображаются

Question

У меня проблема с динамическими формами, которые отображаются некорректно, хотя Авгюри говорит, что они являются частью формы, и конфигурация заполнена.

Мой компонент получает список входных данных формы из службы.

import { Component, OnInit, ViewChild } from '@angular/core';
import { DynamicFormComponent } from '@/_forms/dynamic-form/dynamic-form.component';

import { FieldConfig } from '@/_interface/field.interface';
import { QAndAService } from '@/_services/q-and-a.service';

@Component({
 selector: 'app-dynamic-bedroom',
 templateUrl: './dynamic-bedroom.component.html',
 styleUrls: ['./dynamic-bedroom.component.css']
})
export class DynamicBedroomComponent implements OnInit {
 @ViewChild(DynamicFormComponent) form: DynamicFormComponent;

 regConfig: FieldConfig[];

 constructor(private qandaService: QAndAService) {}

 ngOnInit() {
 this.getQuestions();
}

private getQuestions() {
  this.qandaService.getQuestions().subscribe((resp: any) => {
  this.regConfig = <FieldConfig[]> resp;
 });
}

 submit(value: any) { }
}

Журнал консоли сообщает, что значение form.value не определено.

ОШИБКА TypeError: Невозможно прочитать свойство 'value' из undefined в DynamicFormComponent.get [как значение] (динамическое-form.component.ts: 21) в Object.eval [как updateRenderer] (DynamicBedroomComponent.html: 3) в Object.debugUpdateRenderer [как updateRenderer] (core.js: 22503) в checkAndUpdateView (core.js: 21878) в callViewAction(core.js: 22114) в execComponentViewsAction (core.js: 22056) в checkAndUpdateView (core.js: 21879) в callViewAction (core.js: 22114) в execComponentViewsAction (core.js: 22056) в checkAndUpdateView (core.js: 220.)21879)

Что-то подсказывает мне, что форма вызывает поля до окончания подписки.Кто-нибудь предлагает исправить?

* редактировать добавленный component.html

<div class="form">
 <app-dynamic-form [fields]="regConfig" (submit)="submit($event)"></app-dynamic-form>
 <div class="margin-top">
 {{ form.value | json }}
 </div>
</div>

РЕДАКТИРОВАТЬ 2: После дальнейшей отладки я считаю, что эта проблема заключается в том, что динамический компонент формы пытается построить форму перед элементомконфиги были возвращены из сервиса.Как я могу защитить себя от этого?

Answer 1

Наконец-то я заработал, добавив *ngIf мой динамический тег формы.То, что это сделало, остановило динамическую форму от попытки загрузки, пока у нее не было чего-то в переменной для обработки.

Пример кода

<div class="form">
 <app-dynamic-form [fields]="regConfig" *ngIf="regConfig !== undefined" (submit)="submit($event)"></app-dynamic-form>
</div>