下面是一个使用Angular响应式表单FormArray的示例,其中包含一个按钮,当点击按钮时,会打开另一个弹出表单:
首先,定义一个包含表单控件的FormArray:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
items: this.fb.array([]) // 创建一个空的FormArray
});
}
get items(): FormArray {
return this.myForm.get('items') as FormArray;
}
addItem() {
// 向FormArray中添加新的FormGroup
const newItem = this.fb.group({
name: '',
age: ''
});
this.items.push(newItem);
}
removeItem(index: number) {
// 从FormArray中移除指定的FormGroup
this.items.removeAt(index);
}
}
然后,在HTML模板中,通过ngFor循环来显示FormArray中的每个FormGroup,并在表单中添加一个按钮来打开另一个弹出表单:
这样,当点击"Add Item"按钮时,会在表单中添加一个新的FormGroup,并显示一个新的输入字段。