若在Angular中使用FormArray导致另一个表单中的FormControl丢失,可能是由于表单的重新渲染导致FormControl被重置。可以使用以下方法解决这个问题:
以下是一个示例代码,演示如何解决该问题:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
selector: 'app-example',
template: `
`,
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
parentForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.parentForm = this.fb.group({
childFormArray: this.fb.array([
this.createChildForm()
])
});
}
createChildForm(): FormGroup {
return this.fb.group({
childControl: ''
});
}
saveChildFormValues() {
// 保存FormControl的值
const childFormValues = this.childFormArray.controls.map(control => control.value);
// 重新渲染表单
this.parentForm = this.fb.group({
childFormArray: this.fb.array([
this.createChildForm(),
this.createChildForm()
])
});
// 将保存的值重新设置给FormControl
childFormValues.forEach((value, index) => {
this.childFormArray.controls[index].setValue(value);
});
}
get childFormArray(): FormArray {
return this.parentForm.get('childFormArray') as FormArray;
}
}
在这个示例中,我们首先在ngOnInit方法中创建了一个表单控件parentForm和一个FormArray childFormArray。然后,我们在模板中使用ngFor循环遍历childFormArray,创建多个子表单。
在saveChildFormValues方法中,我们首先保存了每个FormControl的值到childFormValues数组中。然后,我们重新渲染了表单,创建了新的childFormArray。最后,我们通过forEach循环将保存的值重新设置给新的FormControl。
这样,即使表单重新渲染,FormControl的值也会被正确地保留下来。