angular自定义双向绑定表单组件

angular的ControlValueAccessor是一个连接表单模型和视图DOM的抽象类接口 .org-center { margin-left: auto; margin-right: auto; text-align: center; } 使自定义表单组件像原生input一样映射到form表单模型中, 拥有自定义表单组件的form也能使用响应式表单. (也就是使自定义表单组件拥有formControlName属性和ngModel接口.) 毕竟响应式表单才是angular的利器. ControlValueAccessor export interface ControlValueAccessor { writeValue(obj: any): void; registerOnChange(fn: any): void; registerOnTouched(fn: any): void; setDisabledState?(isDisabled: boolean): void; } writeValue(obj: any): 该方法是接收模版中的ngModel. writeValue(value: any): void { this._renderer.setProperty(this._elementRef.nativeElement, 'value', value); } registerOnChange(fn: any): void: 该方法是组件接收到 change 事件的回调, 可以用来通知外部达成双向绑定, 即ngModelChange. registerOnChange(fn: (_: any) => void): void { this._onChange = fn; } registerOnTouched(fn: any): 接收到 touched 事件的回调. registerOnTouched(fn: any): void { this....

July 8, 2019 · 2 min · zakudriver