在Angular 7中,你可以使用反应式表单来链接一个FormArray中的FormGroup到一个对象。下面是一个包含代码示例的解决方法:
首先,在你的组件类中引入必要的模块:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms';
然后,在组件类中定义一个FormGroup和一个FormArray:
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
form: FormGroup;
ngOnInit() {
this.form = new FormGroup({
name: new FormControl(''),
items: new FormArray([])
});
}
// 用于获取items的FormArray控件
get itemsForms() {
return this.form.get('items') as FormArray;
}
// 用于向items的FormArray中添加一个新的FormGroup
addItem() {
const item = new FormGroup({
itemName: new FormControl(''),
itemDescription: new FormControl('')
});
this.itemsForms.push(item);
}
// 用于从items的FormArray中移除一个FormGroup
removeItem(index) {
this.itemsForms.removeAt(index);
}
// 用于保存表单数据
save() {
console.log(this.form.value);
}
}
在上面的代码中,我们创建了一个FormGroup来表示整个表单,并在其中定义了一个FormControl来表示名称字段以及一个FormArray来表示items字段。然后,我们定义了三个方法:addItem
用于向items的FormArray中添加一个新的FormGroup,removeItem
用于从items的FormArray中移除一个FormGroup,以及save
用于保存表单数据。
接下来,在你的组件模板中,你可以使用以下代码来绑定表单控件:
在上面的代码中,我们使用formGroup
指令将整个表单绑定到form
变量,并使用formControlName
指令将表单控件绑定到相应的字段。我们还使用formArrayName
指令将items的FormArray绑定到itemsForms
方法返回的FormArray控件。在ngFor循环中,我们使用formGroupName
指令将每个FormGroup绑定到相应的索引位置。
这就是在Angular 7中使用反应式表单链接FormArray中的FormGroup到对象的解决方法。希望对你有帮助!