Question

我在这里创建了此表单：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"
  }
]

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

Answer 1

如果您正在使用带有Angular的Reactive Forms，我的建议是考虑使用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在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 个答案: