角度动态表单不显示答案

【问题标题】：Angular Dynamic Forms not displaying角度动态表单不显示
【发布时间】：2019-05-13 12:37:51
【问题描述】：

我遇到了一个动态表单的问题，尽管 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) { }
}

控制台日志报告表单。值未定义。

错误类型错误：无法读取未定义的属性“值” 在 DynamicFormComponent.get [作为值] (dynamic-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: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：经过进一步调试，我相信这个问题是动态表单组件在项目配置从服务返回之前尝试构建表单。我该如何保护自己免受这种伤害？

【问题讨论】：

显示你调用submit的模板
@SachilaRanawaka 提交是指动态表单组件吗？

标签： angular angular7

【解决方案1】：

我终于通过将*ngIf 添加到我的动态表单标签来实现此功能。这样做的目的是阻止动态表单尝试加载，直到它在变量中有要处理的内容。

示例代码

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

【讨论】：