Angular 5 FormGroup reset doesn't reset validators

Conquer the validation beast

If you're trying to reset your FormGroup, remember that calling the simple reset() method won't scrub the errors of the form's validators. Unless explicitly handled, they might continue to lurk around, haunting your page beyond reset. To put a stake through their heart, use:

// Walk through each FormControl like a Ghostbusters team
Object.keys(myFormGroup.controls).forEach(key => { 
  const control = form.get(key);
  // Cast away the ghosts of validators past!
  control.setErrors(null);
});


If you're conjuring custom validation, make sure to reignite validation checks post-reset by calling setValidators() and updateValueAndValidity():

// Call in your validators, like rounding up a posse for a showdown at high noon.
myFormGroup.get('myControl').setValidators([Validators.required]);
myFormGroup.get('myControl').updateValueAndValidity();


Sweep away the Material error dust

If you've reset the form and your <mat-error> components are still showing the dusty footprints of your controls, your validators' internal state likely isn't reset. To wipe clean those last pesky footprints, use:

// Get a handle on the FormGroupDirective, like calling in the boss.
@ViewChild(FormGroupDirective) formDirective: FormGroupDirective;

// ...

// Call in a deeper cleaning service, like a crime scene clean-up crew.
this.formDirective.resetForm();


This resetForm() method does the full cleaning service, going beyond a simple FormGroup.reset(), by resetting form's state and validity.

Revive your validators from the ashes

After the reset, you'll want to give life back to the validation for required fields. This can be accomplished by looping through all form controls and attaching necessary validators:

// Like a round-up on a ranch, corral all your FormControls...
Object.keys(myFormGroup.controls).forEach(key => {
  const control = myFormGroup.get(key);
  // Rope in your validators and make them spring back into action!
  control.setValidators([Validators.required]);
  control.updateValueAndValidity();
});


Mastering the state with FormGroupDirective

An often overlooked tool in managing form state and validity in Angular is the FormGroupDirective. Ooo...am I gonna say this? Yes, you can even use it to reset validators.

// Like the golden snitch, catch it after view init
this.formDirective.resetForm();


This directive does a deep clean of the form's state, validity and more importantly treats any persisting 'ng-invalid' issues.

Banishing validator errors: Your Survival Guide

Even after you've reset your form, die-hard validator errors might continue to exist. These ghosts of validators past can cause quite a stir with lingering error messages. Here's your go-to exorcism chant:

// Charm each validator with this invocation...
myFormGroup.get('myControl').setErrors(null);


Forum talks and GitHub gossips

Rest easy, you're not alone battling form reset ghosts in Angular. You might find useful incantations and discussions on GitHub, with enough spells to add to your wizard's grimoire.