动态添加控件以形成角度答案

【问题标题】：Dynamically add control to form in angular动态添加控件以形成角度
【发布时间】：2019-12-03 05:25:09
【问题描述】：

我在这里创建了这个表单：https://stackblitz.com/edit/angular-ay58g9

从选择菜单中选择我无法解决的选项时出现错误。

另外，我想要这样的输出：

When 'form data' selected in dropdown:
[
  data_type: 'form_data',
  form_data: {
    firstname: "saurabh",
    lastname: "Sharma"
  }
]

When 'form data' selected in dropdown:
[
  data_type: 'raw_data',
  raw_data: {
    email: "saurabh@gmail.com",
    contactno: "9999999999"
  }
]

能否请您调查一下并告诉我我做错了什么？

【问题讨论】：

欢迎来到 StackOverflow！请确保添加最小可验证代码 sn-p 以供其他人查看并了解您的问题。有关如何创建minimal reproducible example 的更多详细信息
见Angular: How to dynamically add FormControl to FormArray on button click

标签： angular typescript angular-forms

【解决方案1】：

我稍微调整了您的示例：https://stackblitz.com/edit/angular-avcytw

您动态添加的 formControls 在 formGroups 中。因此最重要的是将formGroupName添加到输入父元素中。

<div *ngIf="this.form.get('form_data')" formGroupName="form_data">
        <input type="text" formControlName="firstname" placeholder="firstname">
        <input type="text" formControlName="lastname"  placeholder="lastname">
    </div>

还有需要调整的初始形式：

    this.form = this.formBuilder.group({
      data_type: ["", Validators.required],
      // form_data: new FormControl(),
      // raw_data: new FormControl()   
    });

form_data: new FormControl() 和 raw_data: new FormControl() 导致 ngIfs 在您动态添加相应的表单控件之前呈现。这就是为什么出现错误，表明无法找到 formControls。

【讨论】：

【解决方案2】：

如果您在 Angular 中使用 Reactive Forms，我的建议是考虑使用 FormArray。

profileForm = this.fb.group({
  firstName: ['', Validators.required],
  lastName: [''],
  formData: this.fb.array([
    this.fb.control('')
  ])
});

角度文档： https://angular.io/guide/reactive-forms#dynamic-controls-using-form-arrays

【讨论】：