Исправляем ошибку сброса валидаторов в Angular 5 FormGroup
Быстрый ответ
// Для полного сброса формы вызывайте reset с объектом начального состояния для каждого элемента управления
myFormGroup.reset({
firstControl: { value: null, disabled: false },
secondControl: { value: null, disabled: false }
// Повторяйте для всех элементов управления
});
Для правильного сброса каждого FormControl
в FormGroup
необходимо разуловечивать начальное состояние, чтобы обнулить значения и обновить валидаторы.
[AsideBanner]
Победите валидационного зверя
Помните, что стандартный вызов reset()
не затирает остаточные ошибки валидаторов. Чтобы они не "возвращались" после сброса, также следует останавливать их сумеречную работу:
// Обойдите все FormControl и установите ошибки валидаторов в null
Object.keys(myFormGroup.controls).forEach(key => {
const control = myFormGroup.get(key);
control.setErrors(null);
});
После сброса пользовательские валидаторы следует активировать заново:
// Назначьте валидаторы и активизируйте валидацию
myFormGroup.get('myControl').setValidators([Validators.required]);
myFormGroup.get('myControl').updateValueAndValidity();
Удалите пережитки ошибок Material
Если после сброса формы ошибки валидации остаются в компонентах <mat-error>
, организуйте более глубокую очистку:
// Используя директиву FormGroupDirective, выполните полный сброс формы
@ViewChild(FormGroupDirective) formDirective: FormGroupDirective;
// ...
this.formDirective.resetForm();
Метод resetForm()
гарантирует полное удаление статуса и валидности формы, а также состояния валидаторов.
Восстановление ваших валидаторов из пепла
Чтобы восстановить валидацию обязательных полей после сброса:
// Обойдите все элементы управления и назначьте необходимые валидаторы
Object.keys(myFormGroup.controls).forEach(key => {
const control = myFormGroup.get(key);
control.setValidators([Validators.required]);
control.updateValueAndValidity();
});
Визуализация
Формы в Angular — это чистый лист. Сброс FormGroup стирает все данные, но валидаторы остаются, словно нестираемые пятна. Их тоже нужно аккуратно очистить, чтобы вернуть форму к исходному чистому состоянию.
Управление состоянием с помощью FormGroupDirective
Воспользуйтесь FormGroupDirective
для управления состоянием и валидностью формы:
// После инициализации визуализации используйте resetForm()
this.formDirective.resetForm();
Это обеспечит глубокую очистку формы и решит оставшиеся проблемы с 'ng-invalid'.
Избавление от ошибок валидаторов: Руководство по выживанию
Даже после сброса формы ошибки валидации могут сохраняться. Вот как от них избавиться:
// Установите ошибки каждого валидатора в null
myFormGroup.get('myControl').setErrors(null);
Полезные материалы
- Angular Forms FormGroup — Справочник API для FormGroup от Angular.
- Реактивные формы в Angular — Детальное руководство по реактивным формам от Angular.
- Stack Overflow: Проблемы сброса FormGroup в Angular — Обсуждение и решения вопросов, связанных с сбросом FormGroup.
- Angular Forms FormControl — Документация API для FormControl от Angular.
- Валидация форм в Angular — Руководство по валидации форм в Angular.
- Обсуждения о методе reset() для FormGroup на GitHub — Страница обсуждений по сбросу FormGroup.
- Пользовательские валидаторы в Angular — Уроки по созданию пользовательских валидаторов для форм в Angular.