在Angular中,我们可以使用FormArray来处理嵌套表单数组映射问题。下面是一个解决方法的代码示例:
首先,我们需要在组件类中初始化一个FormArray,并将其作为父表单组的一部分。假设我们有一个名为userForm
的父表单组,其中有一个名为addresses
的FormArray:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';
@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
userForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.userForm = this.formBuilder.group({
addresses: this.formBuilder.array([])
});
}
get addresses() {
return this.userForm.get('addresses') as FormArray;
}
addAddress() {
const addressFormGroup = this.formBuilder.group({
street: ['', Validators.required],
city: ['', Validators.required],
state: ['', Validators.required]
});
this.addresses.push(addressFormGroup);
}
removeAddress(index: number) {
this.addresses.removeAt(index);
}
}
在上面的代码中,addAddress
方法用于向地址数组中添加一个新的地址,removeAddress
方法用于从地址数组中移除指定索引的地址。
接下来,我们可以在模板中使用ngFor
指令来循环遍历地址数组,并创建每个地址的表单控件。我们还可以使用formGroupName
指令来将每个地址的表单控件与地址数组中的索引进行绑定:
在上面的代码中,我们使用addresses.controls
来获取地址数组的所有控件,并使用index
来获取当前地址的索引。然后,我们将每个地址的表单控件与地址数组中的索引进行绑定。
通过以上的代码,我们就可以实现嵌套表单数组的映射。每次点击“Add Address”按钮时,将会添加一个新的地址表单控件,并且我们可以动态地添加/删除多个地址。
上一篇:Angular嵌套表单数组