- 在HTML文件中,使用Angular的“formArrayName”和“formGroupName”指令来表示表单数组和表单组。
- 在组件中,先创建一个空的表单数组,然后向其中添加初始的表单组。
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
myForm: FormGroup;
ngOnInit() {
this.myForm = new FormGroup({
myArray: new FormArray([
new FormGroup({
myValue: new FormControl('initial value')
})
])
});
}
// 添加新行的方法
addRow() {
const control = this.myForm.controls['myArray'];
const newGroup = new FormGroup({
myValue: new FormControl('same value')
});
control.push(newGroup);
}
}
- 在需要添加新行的地方调用添加新行的方法。