在Angular中,可以使用ControlValueAccessor(CVA)来创建自定义表单控件,并实现表单验证。当使用动态FormArray时,可能会遇到子验证未传播的问题。下面是一个解决方法的示例代码:
首先,创建一个自定义表单控件,并实现ControlValueAccessor接口:
import { Component, forwardRef, Provider } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
const CUSTOM_VALUE_ACCESSOR: Provider = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomFormComponent),
multi: true
};
@Component({
selector: 'app-custom-form',
template: `
`,
providers: [CUSTOM_VALUE_ACCESSOR]
})
export class CustomFormComponent implements ControlValueAccessor {
formArray: FormArray;
// Implement ControlValueAccessor methods
writeValue(value: any): void {
if (value) {
this.formArray = new FormArray(value);
} else {
this.formArray = new FormArray([]);
}
}
registerOnChange(fn: any): void {
this.formArray.valueChanges.subscribe(fn);
}
registerOnTouched(fn: any): void {}
setDisabledState(isDisabled: boolean): void {}
}
然后,在父组件中使用该自定义表单控件,并传入动态的FormArray:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
selector: 'app-parent-component',
template: `
`
})
export class ParentComponent {
form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
customFormArray: this.fb.array([])
});
}
// Add a new control to the FormArray
addControl(): void {
const customFormArray = this.form.get('customFormArray') as FormArray;
customFormArray.push(this.fb.control(''));
}
}
在父组件中,每当添加新的控件时,调用addControl()方法。这样,动态的FormArray会传播到自定义表单控件中,子验证也会正确工作。
希望这个示例能够帮助你解决Angular动态FormArray使用CVA时子验证未传播的问题。
下一篇:Angular动态复选框过滤实现