当使用Angular的controlValueAccessor
时,有时会遇到在不在表单中时,writeValue()
无法更新的问题。这通常是由于绑定的值没有正确更新导致的。
下面是一个解决这个问题的示例:
首先,创建一个自定义的CustomInputComponent
组件,它实现了ControlValueAccessor
接口:
import { Component, forwardRef, Input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@Component({
selector: 'app-custom-input',
templateUrl: './custom-input.component.html',
styleUrls: ['./custom-input.component.css'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomInputComponent),
multi: true
}
]
})
export class CustomInputComponent implements ControlValueAccessor {
private _value: any;
get value(): any {
return this._value;
}
set value(val: any) {
this._value = val;
this.onChange(val);
this.onTouched();
}
writeValue(value: any): void {
this._value = value;
}
registerOnChange(fn: any): void {
this.onChange = fn;
}
registerOnTouched(fn: any): void {
this.onTouched = fn;
}
onChange: any = () => {};
onTouched: any = () => {};
}
在上面的代码中,我们定义了一个私有的_value
变量来存储绑定的值。然后我们定义了一个value
的getter和setter方法,当值发生变化时,我们调用onChange
和onTouched
方法来通知表单控件。
接下来,在CustomInputComponent
的模板文件custom-input.component.html
中,我们可以使用ngModel
指令来绑定值:
这样,当我们使用CustomInputComponent
组件时,可以像下面这样绑定值:
注意,上面的示例中使用了ngModel
指令,这需要在使用CustomInputComponent
的模块中导入FormsModule
模块。
通过以上的修改,CustomInputComponent
组件在不在表单中时,writeValue()
将能够正确地更新绑定的值。