Исправляем ошибку сброса валидаторов в 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);

Полезные материалы

1. Angular Forms FormGroup — Справочник API для FormGroup от Angular.
2. Реактивные формы в Angular — Детальное руководство по реактивным формам от Angular.
3. Stack Overflow: Проблемы сброса FormGroup в Angular — Обсуждение и решения вопросов, связанных с сбросом FormGroup.
4. Angular Forms FormControl — Документация API для FormControl от Angular.
5. Валидация форм в Angular — Руководство по валидации форм в Angular.
6. Обсуждения о методе reset() для FormGroup на GitHub — Страница обсуждений по сбросу FormGroup.
7. Пользовательские валидаторы в Angular — Уроки по созданию пользовательских валидаторов для форм в Angular.