Angular 18 系列（三十二）ControlValueAccessor 自定义表单控件

小渣渣

需求：在日常前端开发的时候，经常会使用到表单，通过表单新增、编辑数据。FormGroup 的实例可以跟踪一组 FormControl 实例，当创建一个 FormGroup 时，其中的每个控件都可以根据名字来进行跟踪。如何自定义一个表单控件呢？

先看效果图：



步骤如下：

• 继承 ControlValueAccessor 接口
• 注册 NG_VALUE_ACCESSOR 提供者
  

继承 ControlValueAccessor 接口

ControlValueAccessor 接口定义了 4 个方法，如下：

• writeValue：任何 FormControl 显式调用 API 的值操作都将调用自定义表单控件的 writeValue() 方法，并将新值作为参数传入。其作用是设置原生表单控件的值。数据流向则是从 Angular form -> Native form（自定义控件）。
• registerOnChange：注册 onChange 事件，在初始化时被调用，参数为事件触发函数。这个事件触发函数有什么用呢？我们首先要在 registerOnChange 中将该事件触发函数保存起来，等到合适的时候（比如控件收到用户输入，需要作出响应时）调用该函数以触发事件。这里的概念比较绕，你可以将这个函数理解成“当控件内表单数据存在变化、需要通知控件的调用方所用到的一个 API”，即将控件内信息同步出去。这个事件函数的参数是 Angular form 所要接收的值。数据流向从 Native form（自定义控件） -> Angular form。
• registerOnTouched：注册 onTouched 事件，即用户和控件交互时触发的回调函数。该函数用于通知表单控件已经处于 touched 状态，以更新绑定的 FormContorl 的内部状态。数据流向从 Native form（自定义控件） -> Angular form。
• setDisabledState：当表单状态变为 DISABLED 或从 DISABLED 变更时，表单 API 会调用 setDisabledState() 方法，以启用或禁用对应的 DOM 元素。数据流向则是从 Angular form -> Native form（自定义控件）。
  

交互如下图：



其实原生表单控件也拥有类似于 ControlValueAccessor 的接口，比如：当 Angular 在组件模板中中遇到 input 或 textarea DOM 原生控件时，就会使用DefaultValueAccessor 指令。

Accessor	Form Element
DefaultValueAccessor	input,textarea
CheckboxControlValueAccessor	input[type=checkbox]
NumberValueAccessor	input[type=number]
RadioControlValueAccessor	input[type=radio]
RangeValueAccessor	input[type=range]
SelectControlValueAccessor	select
SelectMultipleControlValueAccessor	select[multiple]

以上是Angular 为所有原生 DOM 表单元素创建的 Angular 表单控件，即内置ControlValueAccessor。

文档：超链接登录可见。

注册 NG_VALUE_ACCESSOR 提供者

我们实现了 ControlValueAccessor 接口后，还需要将其其注册为 NG_VALUE_ACCESSOR，这样自定义表单控件就可以被 Angular 识别并集成，否则将会报错“RuntimeError: NG01203: No value accessor for form control name: 'xxx'”。

文档：超链接登录可见。

编码

根据步骤，完整编码工作，效果就是最开始的效果图，代码如下。

HTML 页面：

登录可见。

TS 代码：

登录可见。

参考：

超链接登录可见。
超链接登录可见。