如何访问formarray内部的formcontrols

Question

我有以下表格：

form = this.builder.group({
form2: this.builder.array([
this.builder.group({
name: new FormControl(),
surname: new FormControl(),
})
]),
});

在我的oniit中，我这样做是为了设置一个具有设置值的表单控件

this.form.controls.personNameField.setValue(this.person.name);

但这不起作用，可能是因为控件在形式数组中。但是我怎样才能访问我的形式数组控件呢？

Answer 1

您可以在FormArray中添加具有值的控件，如下所示：

get form2Array(){
return this.form.controls.form2 as FormArrray;
}
// If form control exists at index
addPerson(index: number, person: any){
const personFormGroup = this.form2Array.at(index) as FormGroup
personFormGroup.setValue(person) //handle according to your code
}
// If form control does not exist at index
addPerson(index: number, person: any){
this.form2Array.at(index).setControl(index, this.builder.group({
name: this.builder.control({}),
surname: this.builder.control({}),
}))
const personFormGroup = this.form2Array.at(index) as FormGroup
personFormGroup.setValue(person) //handle according to your code
}

Answer 2

您可以通过以下方式访问表单控件：

ngOnInit() {
(this.form.get('form2') as FormArray).at(0).patchValue({ name: 'test' });
}

因此，我们得到父组中的formarray，然后得到formarray中的第一个formgroup(在索引0处(，并修补nameformcontrol的值。