Интерфейс ControlValueAccessor
Подключайте пользовательский виджет к формам Angular
«Интерфейс ControlValueAccessor» — бесплатный урок Angular Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения 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;
}Регистрация провайдера
Сообщите Angular, что Ваш компонент является средством доступа к значению: предоставьте NG_VALUE_ACCESSOR с параметром multi: true и useExisting, ссылающимся на компонент.
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 (Вы передаёте изменения пользователя обратно).
Отслеживание состояния touched
Удобство проверки формы зависит от состояния touched. Уведомляйте Angular с помощью обратного вызова из registerOnTouched, обычно при потере фокуса.
Отключённое состояние
Когда форма отключает элемент управления (control.disable()), Angular вызывает setDisabledState, чтобы Ваш компонент мог визуально отобразить это состояние и игнорировать ввод.
План дальнейшего изучения
В следующих уроках Вы реализуете каждую часть: запись и регистрацию значений, обработку отключённого состояния и состояния touched, а также добавление проверки. Вместе эти возможности превращают компонент в полностью интегрированный пользовательский элемент управления.
Быстрая проверка
Проверьте свои базовые знания о CVA.
Итоги
Вы узнали, что ControlValueAccessor связывает пользовательские компоненты с формами Angular с помощью четырёх методов, зарегистрированных через NG_VALUE_ACCESSOR с использованием forwardRef и multi: true. Далее Вы реализуете запись и регистрацию значений.
Часто задаваемые вопросы
Урок «Интерфейс ControlValueAccessor» бесплатный?
Да — полный текст урока «Интерфейс ControlValueAccessor» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Интерфейс ControlValueAccessor»?
Подключайте пользовательский виджет к формам Angular Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Интерфейс ControlValueAccessor»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Интерфейс ControlValueAccessor
- Запись и регистрация значений
- Обработка отключённого состояния и состояния touched
- Валидация пользовательских элементов управления