在Angular中,可以使用FormArray
来处理具有可变数量的参数的表单输入。以下是一个示例代码:
在组件类中定义一个FormArray
属性,用于存储可变数量的参数:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
selector: 'app-parameter-form',
templateUrl: './parameter-form.component.html',
styleUrls: ['./parameter-form.component.css']
})
export class ParameterFormComponent implements OnInit {
parameterForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.parameterForm = this.fb.group({
parameters: this.fb.array([])
});
}
get parameterControls() {
return this.parameterForm.get('parameters') as FormArray;
}
addParameter() {
const parameter = this.fb.group({
name: '',
value: ''
});
this.parameterControls.push(parameter);
}
removeParameter(index: number) {
this.parameterControls.removeAt(index);
}
onSubmit() {
console.log(this.parameterForm.value);
}
}
在模板中,使用*ngFor
指令来循环显示FormArray
中的参数控件,并提供添加和删除参数的按钮:
在组件类中,我们使用FormBuilder
来构建表单并添加FormArray
,通过parameterControls
方法获取FormArray
的控件列表。addParameter()
方法用于向FormArray
中添加新的参数控件,removeParameter(index: number)
方法用于删除指定索引的参数控件。onSubmit()
方法用于在表单提交时打印表单值。
这样,我们就可以动态添加和删除参数,而不限制参数的数量。