angular - 在构建数组时添加表单控件

Question

我正在构建一个像这样的表单：

actions = [
        { id: 'walkTo', name: 'Walk To' },
        { id: 'use', name: 'Use' },
        { id: 'give', name: 'Give' },
        { id: 'pickUp', name: 'Pick Up' }
    ];

this.myForm = this.fBuilder.group({
            name: [null, [Validators.required]],
            age: [null, [Validators.required]],
            actions: this.buildActions(this.actions)
        });

但是，如何在没有键的情况下向该buildActions方法构建的 formarray 添加控件。我这样做的原因是该数组将是一个复选框列表

buildActions(arr)
    {
        var resultArr = [];
        arr.forEach((x, index) => {
            resultArr.push(this.fBuilder.group({
                this.fBuilder.addControl(false)
            }))
        });
        return this.fBuilder.array(resultArr);
    }

它在this.fBuilder.addControl(false)零件上出错。

标签： angular

Answer 1

这是错误的，因为FormBuilder.addControl()它不是一个函数。

要构建一个简单的表单数组，请传入一个表单控件数组，如下所示：

buildActions(arr): FormArray {
  const controls = arr.map(x => this.fBuilder.control(x));
  return this.fBuilder.array(controls);
}

如果要构建更复杂的表单，也可以将表单组嵌套在表单数组中：

buildActions(arr): FormArray {
  const groups = arr.map(x => this.fBuilder.group({
    text: this.fBuilder.control(x.text),
    checked: this.fBuilder.control(x.checked)
  }));
  return this.fBuilder.array(groups);
}

演示：https ://stackblitz.com/edit/angular-tpcpzc