Angular 5 Formgroup Reset Doesn't Reset Validators

Angular 5 FormGroup reset doesn't reset validators

It (FormGroup) behaves correctly. Your form requires username and password, thus when you reset the form it should be invalid (i.e. form with no username/password is not valid).

If I understand correctly, your issue here is why the red errors are not there at the first time you load the page (where the form is ALSO invalid) but pop up when you click the button. This issue is particularly prominent when you're using Material.

AFAIK, <mat-error> check the validity of FormGroupDirective, not FormGroup, and resetting FormGroup does not reset FormGroupDirective. It's a bit inconvenient, but to clear <mat-error> you would need to reset FormGroupDirective as well.

To do that, in your template, define a variable as such:

<form [formGroup]="myForm" #formDirective="ngForm" 
  (ngSubmit)="submitForm(myForm, formDirective)">

And in your component class, call formDirective.resetForm():

private submitForm(formData: any, formDirective: FormGroupDirective): void {
    formDirective.resetForm();
    this.myForm.reset();
}

GitHub issue: https://github.com/angular/material2/issues/4190

How to reset form validation on submission of the form in ANGULAR 2

There doesn't seem to be support for that yet.
A workaround I have seen is to recreate the form after submit which is obviously cumbersome and ugly.

clearvalidators() not working as expected along with form reset method in angular

you're missing the updateValueAndValidity() function that needs to be called after updating the validators. Moreover, it is recommended to clear validators of controls instead of whole formGroup;

this.myForm.get('cardName').clearValidators();
this.myForm.get('cardName').updateValueAndValidity();

Reset Angular 7 Reactive From Validation

You can remove validations on specific formGroup/formcontrol by using clearValidators()
for reactive forms.

 this.formGroup.clearValidators() or      
 this.formGroup.controls.controlName.clearValidators()

After this, you have to update form control with the removed validator

this.formGroup.controls.controlName.updateValueAndValidity()

This helped me to resolve same issue, hope it helps you to

Angular Form reset issue

try calling this.inputData.markAsUntouched(); instead of setting errors to null after resetting your form. Moreover, instead of this.inputData.reset() try calling this.userForm.resetForm(). to make this accessible-
declare form as NgForm like this:

@ViewChild("userForm") userForm: NgForm;

and in your template

<form #userForm="ngForm" (ngSubmit)="onSaveUser()" novalidate>
    ....
</form>

Cleanest way to reset forms

Add a reference to the ngForm directive in your html code and this gives you access to the form, so you can use .resetForm().

<form #myForm="ngForm" (ngSubmit)="addPost(); myForm.resetForm()"> ... </form>

...Or pass the form to a function:

<form #myForm="ngForm" (ngSubmit)="addPost(myForm)"> ... </form>

addPost(form: NgForm){
    this.newPost = {
        title: this.title,
        body: this.body
    }
    this._postService.addPost(this.newPost);
    form.resetForm(); // or form.reset();
}

The difference between resetForm and reset is that the former will clear the form fields as well as any validation, while the later will only clear the fields. Use resetForm after the form is validated and submitted, otherwise use reset.

Adding another example for people who can't get the above to work.

With button press:

<form #heroForm="ngForm">
    ...
    <button type="button" class="btn btn-default" (click)="newHero(); heroForm.resetForm()">New Hero</button>
</form>

Same thing applies above, you can also choose to pass the form to the newHero function.

Why reset a FormGroup instead of replacing it?

The value of Reset is more apparent when working with a form that contains multiple controls.

this.productForm = this.fb.group({
  productName: ['', [Validators.required,
                     Validators.minLength(3),
                     Validators.maxLength(50)]],
  productCode: ['', Validators.required],
  starRating: ['', NumberValidators.range(1, 5)],
  tags: this.fb.array([]),
  description: ''
});

Then a form reset resets the entire form without having to recreate the entire form group.

Angular 5 Formgroup Reset Doesn't Reset Validators