PricingLoginStart free
Angular Academy · 课时

ControlValueAccessor 接口

将自定义控件连接到 Angular 表单

第 1 / 4 课13 个步骤

ControlValueAccessor 接口 是 CoddyKit 上的免费 Angular Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

为什么需要自定义控件

Angular 开箱即用地支持原生输入控件。要让您自己的组件（评分控件、颜色选择器、切换开关）能够与 ngModel 和 formControlName 一起使用，就必须实现 ControlValueAccessor。

桥梁

ControlValueAccessor（CVA）是 Angular 表单模型与组件视图之间的桥梁。它定义了模型如何写入值，以及用户的更改如何传回模型。

接口

CVA 要求实现四个方法：writeValue、registerOnChange、registerOnTouched，以及可选的 setDisabledState。

interface ControlValueAccessor {
  writeValue(value: any): void;
  registerOnChange(fn: (v: any) => void): void;
  registerOnTouched(fn: () => void): void;
  setDisabledState?(isDisabled: boolean): void;
}

注册提供者

通过提供带有 multi: true 的 NG_VALUE_ACCESSOR，并使用 useExisting 指向该组件，告知 Angular 您的组件是一个值访问器。

import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { forwardRef } from '@angular/core';

providers: [{
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => RatingComponent),
  multi: true
}]

为什么需要 forwardRef

之所以需要 forwardRef，是因为该类在自身定义之前，就已经在自己的元数据中引用了自身。它会将解析推迟到该类存在之后。

组件骨架

自定义控件需要声明提供者并实现接口方法。该类会在内部保存当前值。

@Component({
  selector: 'app-rating',
  providers: [/* NG_VALUE_ACCESSOR ... */]
})
export class RatingComponent implements ControlValueAccessor {
  value = 0;
  // writeValue, registerOnChange, registerOnTouched ...
}

像原生控件一样使用

实现 CVA 后，您的组件就可以像原生输入控件一样，接入模板驱动表单和响应式表单。

<app-rating formControlName="stars"></app-rating>
<!-- or -->
<app-rating [(ngModel)]="stars"></app-rating>

数据的两个方向

模型到视图的流转通过 writeValue 完成（Angular 将表单值推送到组件中）。视图到模型的流转则通过在 registerOnChange 中注册的回调完成（您将用户更改推送出去）。

跟踪已触摸状态

表单验证的用户体验依赖于已触摸状态。您需要通过 registerOnTouched 提供的回调通知 Angular，通常是在失去焦点时通知。

禁用状态

当表单禁用控件（control.disable()）时，Angular 会调用 setDisabledState，以便您的组件在视觉上反映禁用状态并忽略输入。

路线图

后续课程将分别实现各个部分：写入和注册值、处理禁用状态与已触摸状态，以及添加验证。它们结合起来，就能构成一个完全集成的自定义控件。

快速检查

检查您对 CVA 基础知识的掌握情况。

在交互式课程中回答

回顾

您了解到，ControlValueAccessor 通过四个方法将自定义组件连接到 Angular 表单，并通过 NG_VALUE_ACCESSOR、forwardRef 和 multi: true 完成注册。接下来，您将实现值的写入和注册。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程
38
课程
144
免费开始学习查看完整课程

常见问题解答

「ControlValueAccessor 接口」课时是免费的吗？

是的 — 「ControlValueAccessor 接口」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「ControlValueAccessor 接口」这节课中我会学到什么？

将自定义控件连接到 Angular 表单 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。

「ControlValueAccessor 接口」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. ControlValueAccessor 接口
  2. 编写和注册值
  3. 处理禁用和已触碰状态
  4. 自定义控件中的验证
← 返回 Angular Academy