在Angular中,可以使用FormArray
和FormGroup
来实现重复对象的响应式表单。下面是一个包含代码示例的解决方法:
首先,创建一个重复对象的模型类,例如Person
:
export class Person {
name: string;
age: number;
}
然后,在组件中创建一个FormArray
,用于存储重复对象的表单控件:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';
import { Person } from './person';
@Component({
selector: 'app-persons',
templateUrl: './persons.component.html',
styleUrls: ['./persons.component.css']
})
export class PersonsComponent implements OnInit {
personsForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.personsForm = this.formBuilder.group({
persons: this.formBuilder.array([])
});
// 添加初始的重复对象
this.addPerson();
}
get persons(): FormArray {
return this.personsForm.get('persons') as FormArray;
}
addPerson() {
const personFormGroup = this.formBuilder.group({
name: ['', Validators.required],
age: ['', Validators.required]
});
this.persons.push(personFormGroup);
}
removePerson(index: number) {
this.persons.removeAt(index);
}
submitForm() {
if (this.personsForm.valid) {
console.log(this.personsForm.value);
}
}
}
在模板中,使用ngFor
指令来循环渲染重复对象的表单控件,并为每个重复对象提供一个删除按钮:
在上述代码中,addPerson
方法会向persons
数组中添加一个新的personFormGroup
,表示一个新的重复对象。removePerson
方法根据索引从persons
数组中移除对应的personFormGroup
。submitForm
方法用于提交表单数据。
这样,就可以实现一个具有重复对象的响应式表单。