Запись и регистрация значений
Реализуйте writeValue и обратные вызовы изменений
«Запись и регистрация значений» — бесплатный урок Angular Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Два основных метода
Суть средства доступа к значению — двусторонняя передача данных: writeValue передаёт значение модели в представление, а обратный вызов из registerOnChange отправляет изменения пользователя обратно в модель.
writeValue
Angular вызывает writeValue, когда форма задаёт или сбрасывает значение элемента управления. Сохраните это значение в состоянии компонента, чтобы представление отображало его.
value = 0;
writeValue(value: number): void {
this.value = value ?? 0;
}Обработка null
При сбросе writeValue может получить значение null. Преобразуйте его в безопасное значение по умолчанию, чтобы шаблон не перестал работать.
writeValue(value: string | null): void {
this.text = value ?? '';
}registerOnChange
Angular передаёт Вам обратный вызов, который нужно вызывать при каждом изменении значения. Сохраните его и вызывайте при взаимодействии пользователя.
private onChange: (v: number) => void = () => {};
registerOnChange(fn: (v: number) => void): void {
this.onChange = fn;
}Передача изменений
При взаимодействии пользователя обновите внутреннее состояние и вызовите сохранённый обратный вызов onChange с новым значением, чтобы обновить модель формы.
select(rating: number): void {
this.value = rating;
this.onChange(rating);
}Связывание с шаблоном
Шаблон отображает текущее состояние и запускает Ваш обработчик при действиях пользователя, после чего обработчик вызывает onChange.
template: '<button *ngFor="let s of stars" (click)="select(s)" [class.on]="s <= value">star</button>'Синхронизация представления
Поскольку writeValue обновляет внутреннее состояние, а шаблон связан с ним, программные изменения формы (например, с помощью patchValue) сразу отображаются в компоненте.
Совместимость с OnPush
При обнаружении изменений OnPush обновляйте состояние через поля компонента и позволяйте привязкам реагировать на изменения. Если Вы изменяете состояние из асинхронных источников, пометьте компонент для проверки или используйте сигналы, чтобы представление оставалось актуальным.
Не вызывайте onChange в writeValue
Важно: никогда не вызывайте onChange внутри writeValue. Это отправит программные обновления обратно в модель и может привести к циклическим вызовам. onChange предназначен только для изменений, вызванных пользователем.
Типизация значения
Задайте для элемента управления конкретный тип значения (число, строка или собственный интерфейс) и типизируйте методы соответствующим образом, чтобы безопаснее интегрировать его с реактивными формами.
export class RatingComponent implements ControlValueAccessor {
value = 0;
writeValue(v: number) { this.value = v ?? 0; }
registerOnChange(fn: (v: number) => void) { this.onChange = fn; }
}Промежуточный результат
После реализации writeValue и registerOnChange элемент управления считывает данные из модели формы и записывает их обратно. Далее добавьте обработку отключённого состояния и состояния посещённого элемента для полноценного взаимодействия с пользователем.
Быстрая проверка
Проверьте свои знания о записи значений.
Итоги
Вы реализовали writeValue (передача данных из модели в представление с обработкой значения null), использовали обратный вызов registerOnChange для передачи изменений пользователя (из представления в модель), связали шаблон и узнали, что из writeValue никогда не следует вызывать onChange.
Часто задаваемые вопросы
Урок «Запись и регистрация значений» бесплатный?
Да — полный текст урока «Запись и регистрация значений» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Запись и регистрация значений»?
Реализуйте writeValue и обратные вызовы изменений Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Запись и регистрация значений»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Интерфейс ControlValueAccessor
- Запись и регистрация значений
- Обработка отключённого состояния и состояния touched
- Валидация пользовательских элементов управления