Решение: ошибка в Angular 5 – Expected validator возврат
Быстрый ответ
Для успешной интеграции пользовательского валидатора с асинхронными операциями в Angular, валидатор должен возвращать Promise
или Observable
. При отсутствии ошибок в данных предусмотрено возвращение null
, в случае обнаружения ошибок должен возвращаться объект с описанием данной ошибки.
Примеры кода:
Валидатор на основе Promise:
function asyncValidator(control) {
return new Promise(resolve => {
setTimeout(() => {
const result = control.value === 'valid' ? null : { error: true };
resolve(result);
}, 1000);
});
}
На основе Observable:
import { of } from 'rxjs';
import { delay } from 'rxjs/operators';
function asyncValidator(control) {
const result = control.value === 'valid' ? null : { error: true };
return of(result).pipe(delay(1000));
}
В случае отсутствия ошибок используйте null
, а если данные не прошли валидацию, используйте { key: true }
.
Формирование объединений валидаторов с помощью массивов
Возможности массивов
В контексте реактивных форм Angular массив валидаторов можно сравнить с командой супергероев, борющихся против некорректных данных. Валидаторы — это герои, а их коллектив — массив.
Базовая структура валидации контрола
Структура инициализации контролов формы в Angular выглядит так:
new FormControl(НАЧАЛЬНОЕ_ЗНАЧЕНИЕ, [syncValidators], [asyncValidators])
Здесь синхронные валидаторы, такие как Validators.required
, передаются вторым аргументом, а асинхронные, как например ваша функция asyncValidator
— третьим.
Разница между синхронными и асинхронными валидаторами
Важно отметить различия:
- Синхронные валидаторы работают моментально.
- Асинхронные валидаторы требуют времени и возвращают
Promise
илиObservable
.
Рекомендации по работе с валидаторами
Следуйте следующим принципам:
Validators.compose([])
используйте для объединения валидаторов в случаях, когда неприменимы массивы.- Разделяйте синхронные и асинхронные валидаторы, первоочередность у синхронных.
- Используйте квадратные скобки для массивов валидаторов.
- Внимайте синтаксису: лишние запятые, пропущенные скобки.
Пользовательские валидаторы и успешное избегание ошибок валидации формы
Создание собственного валидатора
Создание пользовательских синхронных валидаторов:
function customRequiredValidator(control) {
const isValid = control.value !== null && control.value.trim().length > 0;
return isValid ? null : { 'required': true };
}
new FormControl('', [customRequiredValidator, anotherSyncValidator])
Для синхронных валидаторов Promise
и Observable
не требуются.
Работа с асинхронностью
Асинхронные валидаторы предусматривают:
- Promise предоставляет результат единожды.
- Observable может обновляться в процессе.
Частые ошибки при валидации и простые способы их решения
Ошибки при работе с массивом валидаторов
При отсутствии массива валидаторов может возникнуть ошибка, выражающаяся в следующем сообщении:
Ошибка: Ожидаемый валидатор должен возвращать Promise или Observable
Это указывает на то, что валидатору требуется массив для работы.
Предотвращение неожиданных ошибок
Рекомендации по работе с валидаторами:
- Чётко указывайте начальное значение контрола.
- Прохождение проверки валидации воспринимайте как приключение.
- Помните о последовательности валидаторов.
Визуализация
Функцию валидатора можно визуализировать как мост:
Ввод (🔧) -- Мост Валидатора (🌉) --> Земля Обещаний (🏰)
или
Остров Observable (🏝️)
Крайне важно, чтобы валидаторы возвращали ожидаемый тип данных.
Полезные материалы
- Подробное описание
Promise
в JavaScript. - Руководство по
Observables
в Angular. - Отличия между
Promise
иObservable
. - Применение
async/await
в JavaScript разъяснено просто. - Основные принципы реактивного программирования и работы с
observables
с помощьюRxJS
. - Практические примеры работы с асинхронными валидаторами в Angular.
- Инструкция по работе с
JavaScript Promises
от W3Schools.