Валидация пользовательских элементов управления
Предоставляйте валидаторы из пользовательских элементов управления
«Валидация пользовательских элементов управления» — бесплатный урок Angular Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Элементы управления с собственной проверкой
Пользовательский элемент управления может содержать собственную логику проверки: для этого реализуйте интерфейс Validator и зарегистрируйте его через NG_VALIDATORS. Тогда потребители автоматически получат информацию о корректности.
Интерфейс Validator
Validator требует метода validate, который возвращает ValidationErrors (словарь ошибок) или null, если значение корректно.
import { Validator, ValidationErrors, AbstractControl } from '@angular/forms';
export class RatingComponent implements Validator {
validate(control: AbstractControl): ValidationErrors | null {
return control.value > 0 ? null : { required: true };
}
}Регистрация NG_VALIDATORS
Добавьте второго поставщика с несколькими значениями для NG_VALIDATORS рядом с NG_VALUE_ACCESSOR, снова используя forwardRef.
import { NG_VALIDATORS } from '@angular/forms';
providers: [
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RatingComponent), multi: true },
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => RatingComponent), multi: true }
]Возврат словарей ошибок
Ключи словаря ошибок становятся записями в control.errors. Используйте понятные ключи и необязательные данные, чтобы шаблоны могли показывать точные сообщения.
validate(control: AbstractControl): ValidationErrors | null {
const v = control.value;
if (v == null) return { required: true };
if (v < this.min) return { min: { required: this.min, actual: v } };
return null;
}Использование ошибок
Шаблоны считывают control.errors так же, как при использовании встроенных средств проверки, и показывают сообщения, когда элемент управления некорректен и посещён.
<small *ngIf="form.controls.stars.errors?.['required']">Pick a rating</small>Объединение с внешними средствами проверки
Средства проверки элемента управления и средства проверки, переданные потребителем в реактивной форме, выполняются оба и объединяются. Правила вашего элемента управления дополняют правила формы, а не заменяют их.
stars: [0, [Validators.required]] // plus the control's own validate()Динамическая проверка
Если проверка зависит от изменяющегося входного значения, вызовите зарегистрированный обратный вызов изменений, чтобы сообщить Angular о необходимости повторно выполнить проверку.
private onValidatorChange: () => void = () => {};
registerOnValidatorChange(fn: () => void) { this.onValidatorChange = fn; }
@Input() set min(v: number) { this._min = v; this.onValidatorChange(); }Асинхронная проверка
Для проверок на сервере реализуйте AsyncValidator с методом validate, возвращающим наблюдаемый объект или промис с ошибками, и зарегистрируйте его через NG_ASYNC_VALIDATORS.
validate(control: AbstractControl): Observable<ValidationErrors | null> {
return this.api.isUnique(control.value).pipe(
map(ok => ok ? null : { taken: true })
);
}Сосредоточьтесь на главном
Помещайте внутрь элемента управления только проверки, неотъемлемые от его сути (например, рейтинг должен быть больше нуля). Специфичные для бизнеса правила оставляйте потребляющей форме, чтобы элемент можно было повторно использовать.
Проверка в тестах
Проверяйте validate напрямую: передайте поддельный элемент управления со значением и проверьте возвращённый словарь ошибок или значение null.
it('requires a rating', () => {
const c = new FormControl(0);
expect(component.validate(c)).toEqual({ required: true });
});Полностью пользовательский элемент управления
После реализации доступа к значению, обработки отключённого и посещённого состояний и проверки ваш компонент становится полноценным повторно используемым элементом формы, неотличимым для потребителей от обычного поля ввода.
Быстрая проверка
Проверьте свои знания о проверке.
Итоги
Вы добавили проверку, реализовав Validator.validate, зарегистрировав NG_VALIDATORS, возвращая словари ошибок и поддержав динамическую повторную проверку через registerOnValidatorChange. Кроме того, вы узнали, как при необходимости использовать AsyncValidator с NG_ASYNC_VALIDATORS для полностью интегрированного пользовательского элемента управления.
Часто задаваемые вопросы
Урок «Валидация пользовательских элементов управления» бесплатный?
Да — полный текст урока «Валидация пользовательских элементов управления» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Валидация пользовательских элементов управления»?
Предоставляйте валидаторы из пользовательских элементов управления Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Валидация пользовательских элементов управления»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Интерфейс ControlValueAccessor
- Запись и регистрация значений
- Обработка отключённого состояния и состояния touched
- Валидация пользовательских элементов управления