这是一个已知的问题。解决方法是在最后一个元素的formcontrol上手动触发值更改事件,以便FormArray能够更新。以下是一个示例代码:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
selector: 'app-form',
template: `
`
})
export class FormComponent {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
items: this.fb.array([this.createItem()])
});
}
createItem(): FormGroup {
return this.fb.group({
name: ''
});
}
addItem() {
const control = this.myForm.controls['items'];
control.push(this.createItem());
//手动触发最后一个元素的formcontrol的值更改事件
const lastItem = control.at(control.length - 1);
lastItem.get('name').setValue('');
}
}