当Angular自定义表单控件(如下拉列表、复选框等)与表单元素进行交互时,通常需要在控件的值发生变化时触发onChange事件,并将新值传递给FormControl,以便在父组件中进行处理。然而,在某些情况下,Angular自定义表单控件可能不会正确地触发onChange事件,导致表单元素的值无法正确更新,从而影响表单的提交和验证等功能。
解决这个问题的方法是,在自定义表单控件中手动触发onChange事件,并将新值传递给FormControl。可以通过下面的示例代码来实现这个功能:
import { Component, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
@Component({
selector: 'app-custom-control',
templateUrl: './custom-control.component.html',
styleUrls: ['./custom-control.component.css'],
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomControlComponent),
multi: true
}]
})
export class CustomControlComponent implements ControlValueAccessor {
private innerValue: any;
onChange = (_: any) => { };
onTouched = () => { };
get value(): any {
return this.innerValue;
}
set value(value: any) {
if (this.innerValue !== value) {
this.innerValue = value;
this.onChange(value); // 手动触发onChange事件
}
}
writeValue(value: any) {
if (value !== undefined && this.innerValue !== value) {
this.innerValue = value;
}
}
registerOnChange(fn: any) {
this.onChange = fn;
}
registerOnTouched(fn: any) {
this.onTouched = fn;
}
}
在上面的代码中,我们首先通过实现ControlValueAccessor接口来定义我们的自定义表单控件,然后在构造函数中调用