angular - 使用表单部件数组扩展 Angular6 动态表单示例

Question

我尝试通过使用带有 {names 和 QuestionBase[]} 对象的数组来扩展动态表单的 Angular 示例。 我对标准实现有 0 个问题，只是我自己的编辑。 我认为在接收新的模型数据时我没有遇到问题，但是在创建 FormGroup 时，尤其是关于它的属性：有效。希望你能在这里帮助我。
我收到以下错误消息：

DynamicFormQuestionComponent.html:13 错误类型错误：无法读取未定义的属性“有效”（…）

和上下文

DynamicFormQuestionComponent.html:13 ERROR CONTEXT DebugContext_ {view: Object, nodeIndex: 11, nodeDef: Object, elDef: Object, elView: Object}

这就是我添加到 question.service.ts 中的内容：

getDummies() {
let questions: QuestionBase<any>[] = [

  new DropdownQuestion({
    key: 'brave2',
    label: 'Bravery Rating',
    options: [
      {key: 'solid',  value: 'Solid'},
      {key: 'great',  value: 'Great'},
      {key: 'good',   value: 'Good'},
      {key: 'unproven', value: 'Unproven'}
    ],
    order: 20
  })];
let questions2: QuestionBase<any>[] = [
  new TextboxQuestion( {
    key: 'BG',
    label: 'Begründung',
    value: '',
    required: true,
    order: 3
  })
];
let object = [{name: 'test',data: questions2},
  {name: 'test2', data: questions}];

return object;

在我的组件中，我在模板中进行了更改（即显示，因此 app.component.html 或我的表单页面）：

<app-dynamic-forms [questions]="questions" [dummies]="dummies"></app-dynamic-forms>

在 .ts 中：

 dummies: any ;

尤其是构造函数：

this.dummies = service.getDummies();

dynamic-forms.component.ts（是的，我通过添加“s”更改了整个组件的名称）：

 @Input() dummies: any[] = [];
form2: FormGroup;

ngOnInit：

for (let i = 0; i < this.dummies.length; i++){
  this.form2  = this.qcs.toFormGroup(this.dummies[i].data);

模板（将此添加到 -tag 中）：

<div *ngFor="let dummy of dummies, let i = index">
      <h3>{{dummy.name}}</h3>
      <p>{{dummy.data}}</p>
      <app-question [question]="dummy.data[i]" [form]="form2"> </app-question>
    </div>

我将所有相关文件添加到这个Plunker。

提前致谢！

标签： angularformstypescriptdynamicangular-reactive-forms