假设我们有一个父级表单,其中包含一个子级表单数组。我们想要将父级表单的值设置为子级表单数组的值。以下是一个解决方法的示例代码:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
selector: 'app-form-example',
templateUrl: './form-example.component.html',
styleUrls: ['./form-example.component.css']
})
export class FormExampleComponent implements OnInit {
parentForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.parentForm = this.formBuilder.group({
childForms: this.formBuilder.array([])
});
}
ngOnInit() {
// 添加两个子级表单
this.addChildForm();
this.addChildForm();
}
addChildForm() {
const childForm = this.formBuilder.group({
// 子级表单字段
name: '',
age: ''
});
// 将子级表单添加到子级表单数组
this.childForms.push(childForm);
}
removeChildForm(index: number) {
// 从子级表单数组中移除指定索引的子级表单
this.childForms.removeAt(index);
}
get childForms() {
return this.parentForm.get('childForms') as FormArray;
}
submitForm() {
// 将父级表单的值设置为子级表单数组的值
console.log(this.parentForm.value);
}
}
在上面的示例代码中,我们首先创建了一个父级表单,其中包含一个子级表单数组。然后,我们在组件的ngOnInit
方法中添加了两个子级表单。
在添加和删除子级表单时,我们使用addChildForm
和removeChildForm
方法。这些方法通过this.childForms
属性访问子级表单数组,并使用push
和removeAt
方法来添加和删除子级表单。
最后,我们在submitForm
方法中将父级表单的值设置为子级表单数组的值,并在控制台上打印出来。
请注意,上述代码中的模板文件(form-example.component.html
)应该包含一个按钮来添加和删除子级表单,以及一个提交按钮来调用submitForm
方法。此外,还需要在模板中显示子级表单数组的字段。