在Angular中,FormArray是一个特殊的表单控件,用于管理动态表单控件的数组。它可以用来表示表单中的重复控件,例如重复的输入框或复选框。
FormArray可以以两种方式使用:
import { Component } from '@angular/core';
import { FormArray } from '@angular/forms';
@Component({
selector: 'app-example',
template: `
`
})
export class ExampleComponent {
formArray: FormArray;
constructor() {
this.formArray = new FormArray([]);
}
addInput() {
this.formArray.push(new FormControl(''));
}
}
在这个例子中,formArray被初始化为一个空数组。通过调用addInput()方法,我们可以将新的FormControl添加到formArray中。
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';
@Component({
selector: 'app-example',
template: `
`
})
export class ExampleComponent {
formGroup: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.formGroup = this.formBuilder.group({
items: this.formBuilder.array([this.createItem()])
});
}
get formItems() {
return this.formGroup.get('items') as FormArray;
}
createItem(): FormGroup {
return this.formBuilder.group({
name: ['', Validators.required],
age: ['', Validators.required]
});
}
}
在这个例子中,formItems是一个FormArray对象,它是由FormGroup的属性初始化的。我们可以通过formItems来添加、删除和访问表单控件。
总结来说,当FormArray被初始化为一个空数组时,它是一个传统的数组;当FormArray被初始化为一个FormGroup的属性时,它是一个FormArray对象。