ControlValueAccessor без боли: проектирование переиспользуемых элементов форм
Анатомия надежных кастомных инпутов с валидацией, поддержкой WAI-ARIA и бесшовной интеграцией в Reactive Forms.
1. Суть контракта ControlValueAccessor
Интерфейс ControlValueAccessor — это мост между моделью формы Angular и пользовательским DOM-элементом. Он состоит из четырёх методов: writeValue, registerOnChange, registerOnTouched и setDisabledState.
Самая частая ошибка — вызов функции onChange внутри writeValue, что приводит к бесконечным циклам обновлений и поломке флагов dirty/pristine.
2. Сигналы и формы: современный подход с model()
В современном Angular двусторонняя связь компонентов строится через model(). Для простых компонентов это полностью устраняет необходимость в многословном CVA-бойлерплейте.
Однако для сложных UI-компонентов корпоративных дизайн-систем поддержка CVA остаётся стандартом совместимости со строгими реактивными формами.
3. Доступность (WAI-ARIA) как обязательный атрибут
Кастомный элемент формы обязан поддерживать клавиатурную навигацию (Tab, Enter, Escape, Arrow keys), связываться с лейблом через aria-labelledby и транслировать ошибки валидации скринридерам через aria-invalid и aria-describedby.