在Angular 7中,我们可以使用ControlValueAccessor来自定义表单控件的双向绑定。对于FormArray,我们可以自定义一个ControlValueAccessor来处理它的值。
首先,我们需要创建一个实现ControlValueAccessor接口的自定义指令。这个指令将处理FormArray的值的读取和写入。
import { Directive, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@Directive({
selector: '[formArrayValueAccessor]',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => FormArrayValueAccessorDirective),
multi: true
}
]
})
export class FormArrayValueAccessorDirective implements ControlValueAccessor {
private onChange: (value: any) => void;
private onTouched: () => void;
writeValue(value: any): void {
// 设置FormArray的值
if (value) {
this.onChange(value);
}
}
registerOnChange(fn: any): void {
this.onChange = fn;
}
registerOnTouched(fn: any): void {
this.onTouched = fn;
}
setDisabledState?(isDisabled: boolean): void {
// 可选方法,用于禁用表单控件
}
}
接下来,我们需要将这个指令应用到FormArray所在的元素上。
最后,我们需要在组件中使用FormBuilder来创建FormArray,并将自定义指令应用到相应的元素上。
import { Component } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
@Component({
selector: 'app-my-component',
template: `
`
})
export class MyComponent {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.myForm = this.formBuilder.group({
myFormArray: this.formBuilder.array([
new FormControl(''),
new FormControl('')
])
});
}
}
现在,我们已经完成了使用ControlValueAccessor处理FormArray的双向绑定。当FormArray的值发生变化时,自定义指令将会负责更新视图,当视图发生变化时,自定义指令将会负责更新FormArray的值。