beizhu
type
Post
status
Published
date
Apr 2, 2020
slug
summary
ControlValueAccessor acts as a bridge between the Angular forms API and a native element in the DOM.
tags
Angular
category
技术
icon
password
Angular中的自定义表单控件ControlValueAccessor
这个是个较为简单的理解
ControlValueAccessor acts as a bridge between the Angular forms API and a native element in the DOM.
作用：
- 把 form 模型中值映射到视图中
- 当视图发生变化时，通知 form directives 或 form controls
- writeValue(obj: any)：该方法用于将模型中的新值写入视图或 DOM 属性中，即model->view
- registerOnChange(fn: any)：设置当控件接收到 change 事件后，调用的函数，可以用来通知外部，组件已经发生变化，即view->model
- registerOnTouched(fn: any)：设置当控件接收到 touched 事件后，调用的函数
- setDisabledState?(isDisabled: boolean)：当控件状态变成 DISABLED 或从 DISABLED 状态变化成 ENABLE 状态时，会调用该函数。该函数会根据参数值，启用或禁用指定的 DOM 元素。
任何一个组件或指令都可以通过实现
ControlValueAccessor 接口并注册为 NG_VALUE_ACCESSOR，从而转变成 ControlValueAccessor 类型的对象registerOnChange 方法来注册由每次原生表单控件值更新时触发的回调函数Example:
子组件
父组件