1

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

表单看起来像这样：

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

这样做的最佳方法是什么？

4

1 回答 1

2

您应该创建一个监听 noOfControls 值的可观察对象，在此可观察对象中，您应该调用一个方法，根据当前控件的长度向您的 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)=>{
     ...
    })

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

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
}

要删除最后一个元素，您可以使用 removeAt(index: number)FormArray 类中的方法

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

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

于 2018-04-15T00:21:25.467 回答