创建一个 FormBuilder 数组，其中包含由另一个输入表示的控件数量

Question

我正在编写一个 Angular 5 应用程序，我需要为其中一个属性使用 FormBuilder 数组。我有一个属性说明数组中应该有多少个控件，但找不到任何关于如何创建包含那么多控件的 FormBuilder 数组的资源。

表单看起来像这样：

this.Form = this.fb.group({
    ...
    noOfControls: null, // 
    controls: <-- fb.array
});

执行此操作的最佳方法是什么？

Answer 1

你应该创建一个监听 noOfControls 值的 observable，在这个 observable 中你应该调用一个方法来根据当前控件的长度向你的 formArray 添加或删除控件

假设这是你的表单

this.Form = this.fb.group({
    noOfControls: this.fb.control(null,[]),
    controls: this.fb.array([])
});

监听你可以使用的控件的变化

this.Form.valueChanges.map(values=>values.noOfControls).distinctUntilChanged()
.subscribe((num)=>{
     ...
    })

要以简单的方式处理数组中的控件，您可以创建一种方法，return 将控件作为数组

get control() {
 return this.form.get('controls') as FormArray
}

在订阅中你应该有某种逻辑来分析每次数字改变你的控制数组的长度

if(this.control.length > num) {
 ... remove one control array item
}
if(this.control.length < num) {
 ... add the differences in the number of control items
}

要从 FormArray class

中使用 removeAt(index: number) 方法删除最后一个元素

要添加新的表单控件，您可以使用 push(control: AbstractControl)

如果您需要更多帮助，请告诉我

创建一个 FormBuilder 数组，其中包含由另一个输入表示的控件数量

Create a FormBuilder array with number of controls expressed by another input

angular

angular-reactive-forms

angular-formbuilder