Angular:formArray添加项和表单值Change

Question

我有一个使用formArray的Form：

initForm() {
this.mainForm = this.formBuilder.group({
foos: this.formBuilder.array([], [Validators.required]),
});

getFoos(): FormArray {
return this.mainForm.get('foos') as FormArray;
}
onAddFoo() {
this.getFoos().push(this.formBuilder.control(''));
}

Foo项目是一个子窗体：

export interface FooFormValues {
id: number,
toto: number,
}
@Component({
selector: 'ngx-Foo',
templateUrl: './Foo.component.html',
styleUrls: ['./Foo.component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => FooComponent),
multi: true
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => FooComponent),
multi: true
}
]
})
export class FooComponent implements OnInit, OnDestroy, ControlValueAccessor {
@Input() inErrors: any[];
destroy$: Subject<boolean> = new Subject<boolean>();

FooForm: FormGroup;
constructor(
private formBuilder: FormBuilder,
public translate: TranslateService,
) { 
}
get f() { return this.FooForm.controls; }
/////////////////////////////////////////////////////////
////// OnInit & onDestroy
/////////////////////////////////////////////////////////
ngOnInit(): void {
this.initForm();
this.FooForm.valueChanges.takeUntil(this.destroy$).subscribe(value => {
this.onChange(value);
this.onTouched();
});

}
ngOnDestroy() {
this.destroy$.next(true);
this.destroy$.unsubscribe();
}
//////////////////////////////////////////////////////////////////////////////
///// Control Value Accessor
//////////////////////////////////////////////////////////////////////////////
get value(): FooFormValues {
return this.FooForm.value;
}
set value(value: FooFormValues) {
//if( value !== undefined && this.value !== value){ 
if( value !== undefined ){      
this.FooForm.patchValue(value);
this.onChange(value);
this.onTouched();
}
}
onChange: any = () => {}
onTouched: any = () => {
}
// this method sets the value programmatically
writeValue(value) {
if (value) {
this.value = value;
}
if (value === null) {
this.FooForm.reset();
}
}
// upon UI element value changes, this method gets triggered
registerOnChange(fn) {
this.onChange = fn;
}
// upon touching the element, this method gets triggered
registerOnTouched(fn) {
this.onTouched = fn;
}
// communicate the inner form validation to the parent form
validate(_: FormControl) {
return this.FooForm.valid ? null : { profile: { valid: false } };
}
get errors() {
return this.FooForm.errors ? null : this.FooForm.errors;
}

//////////////////////////////////////////////////////////////////////////////
///// Miscellaneous Functions
//////////////////////////////////////////////////////////////////////////////
initForm() {
this.FooForm = this.formBuilder.group({
id: '',
toto: ['10', [Validators.required, Validators.min(0)]],
});
}
onSubmitForm() {}
}

我的主要表单组件使用子选项来评估Change:

this.mainForm.valueChanges.takeUntil(this.destroy$(.subscribe(val=>｛…｝(；

单击添加表单数组项目按钮时，会触发主表单onChange，但val.foos是["，"，…]

I try to add :
this.value={
id: null,
toto: 10,} 

在InitForm函数中，但结果相同！

感谢您的帮助

Answer 1

通过在ViewInit之后调用updateValueandValidity手动触发valueChanges，它将更新父窗体Control。

试试这个：

ngAfterViewInit(){
setTimeout(()=>{
this.FooForm.updateValueAndValidity();
})
}

工作示例