Обработка отключённого состояния и состояния touched
Отражайте состояние формы в элементе управления
«Обработка отключённого состояния и состояния touched» — бесплатный урок Angular Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Что ещё нужно для значения
Полноценный пользовательский элемент управления учитывает ещё две концепции форм: состояние disabled и состояние touched. Они влияют на взаимодействие с пользователем и отображение результатов проверки.
setDisabledState
Angular вызывает setDisabledState, когда элемент управления формы отключают или включают (например, с помощью control.disable()). Отразите это состояние в своём компоненте.
disabled = false;
setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled;
}Отображение отключённого состояния
Используйте флаг disabled, чтобы изменять оформление элемента управления и блокировать взаимодействие с ним, не позволяя пользователям изменять отключённое поле.
template: '<button [disabled]="disabled" (click)="select(s)">star</button>'Защита обработчиков
Также защитите обработчики изменений, чтобы программное или клавиатурное взаимодействие ничего не делало, пока элемент управления отключён.
select(rating: number): void {
if (this.disabled) return;
this.value = rating;
this.onChange(rating);
}registerOnTouched
Angular передаёт обратный вызов для пометки элемента управления как посещённого. Сохраните его так же, как вы сохранили onChange.
private onTouched: () => void = () => {};
registerOnTouched(fn: () => void): void {
this.onTouched = fn;
}Вызов onTouched
Вызывайте обратный вызов для посещённого состояния, когда пользователь покидает элемент управления, обычно при потере фокуса. Так Angular узнаёт, что пользователь взаимодействовал с элементом, и включает сообщения проверки, основанные на состоянии посещённости.
onBlur(): void {
this.onTouched();
}Почему важно состояние touched
При проверке формы ошибки часто показываются только после того, как поле становится посещённым. Если не вызывать onTouched, значение control.touched останется равным false, и сообщения об ошибках могут появляться не вовремя или не появляться вовсе.
<small *ngIf="control.touched && control.invalid">Required</small>Связывание потери фокуса
Добавьте обработчик потери фокуса в шаблон, чтобы при выходе из элемента управления он помечался как посещённый.
template: '<div (blur)="onBlur()" tabindex="0">...</div>'Шаблон отключения в реактивной форме
Предпочитайте отключать элемент через API формы (control.disable()), а не с помощью привязки disabled в шаблоне, чтобы Angular всегда корректно вызывал setDisabledState.
this.form.get('stars')?.disable();Доступность
Доступно отражайте состояния отключения и фокуса: задавайте aria-disabled, управляйте tabindex и убедитесь, что пользователи клавиатуры могут покинуть элемент управления, чтобы вызвать состояние touched. Так элемент останется доступным для всех.
Полная интеграция
После обработки значения, отключённого и посещённого состояний ваш элемент управления ведёт себя как обычное поле ввода в реактивных формах и формах, управляемых шаблоном. Осталось добавить проверку.
Быстрая проверка
Проверьте свои знания об отключённом и посещённом состояниях.
Итоги
Вы обработали setDisabledState (отражение отключённого состояния и защита от взаимодействия при отключении) и registerOnTouched (вызов при потере фокуса для пометки элемента как посещённого и включения соответствующего взаимодействия проверки). Предпочитайте управлять отключённым состоянием через API формы и сохраняйте доступность элемента управления.
Часто задаваемые вопросы
Урок «Обработка отключённого состояния и состояния touched» бесплатный?
Да — полный текст урока «Обработка отключённого состояния и состояния touched» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Обработка отключённого состояния и состояния touched»?
Отражайте состояние формы в элементе управления Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Обработка отключённого состояния и состояния touched»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Интерфейс ControlValueAccessor
- Запись и регистрация значений
- Обработка отключённого состояния и состояния touched
- Валидация пользовательских элементов управления