Angular 动态表单未显示

Question

我遇到动态表单的问题，虽然 Augury 说它们是表单的一部分并且配置已填充，但它们无法正确显示。

我的组件正在从服务中检索表单输入列表。

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 未定义。

ERROR TypeError: Cannot read property 'value' of undefined at DynamicFormComponent.get [as value] (dynamic-form.component.ts:21) at Object.eval [as updateRenderer] (DynamicBedroomComponent.html:3) at Object.debugUpdateRenderer [as updateRenderer] (core.js:22503) at checkAndUpdateView (core.js:21878) at callViewAction (core.js:22114) at execComponentViewsAction (core.js:22056) at checkAndUpdateView (core.js:21879) at callViewAction (core.js:22114) at execComponentViewsAction (core.js:22056) at checkAndUpdateView (core.js: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>

Angular 动态表单未显示

Angular Dynamic Forms not displaying

angular

angular7