Angular 11 ReactiveForm：如何将表单控件更改为表单数组（表单数组内的表单数组）

Posted 2023-03-25

【中文标题】Angular 11 ReactiveForm：如何将表单控件更改为表单数组（表单数组内的表单数组）

【英文标题】：Angular 11 ReactiveForm: How to change form control to a form array(form array inside form array)

【发布时间】：2021-12-19 14:16:43

【问题描述】：

我有一个带有这些控件的表单数组

this.formBuilder.group(fieldName: [null, Validators.required],
displayName: [null, Validators.required],
fieldType: [0, Validators.required],
defaultValue: [null],
fieldValues: [null],
sortOrder: [null],);

我有一个任务，当我单击一个按钮时，它会将 defaultValue 控件更改为具有两个控件的表单数组（当前是一个表单控件）。我是 Angular 新手，我不知道如何编写在 html 和 Ts 文件中。谁能帮帮我？

【参考方案1】：

反应式表单提供setControl，您可以用它替换现有控件。所以如果你想把它做成一个带有两个表单控件的formarray，可以通过以下方式实现：

this.form.setControl(
  'defaultValue',
  this.formBuilder.array([
    this.formBuilder.control(''),
    this.formBuilder.control('')
  ])
);