在 angular 中动态添加控件到表单

Question

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

我在 select 从 select 菜单中选择我无法解决的选项时遇到错误。

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

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"
  }
]

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

Answer 1

如果您将 Reactive Forms 与 Angular 一起使用，我的建议是考虑使用 FormArray。

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

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

Answer 2

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

您动态添加的 formControl 位于 formGroup 中。因此最重要的是将 formGroupName 添加到 inputs 父元素。

<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 的原因。

在 angular 中动态添加控件到表单

Dynamically add control to form in angular

angular

typescript

angular-forms