how to reset all validations on click of submit button in reactive form

Question

I have completed my project in all respects but strangely enough at the last stage I am finding it difficult to remove the visible validators on clicking the "Submit Button", even if the input fields in the registration form are completed in all respects.

I have also tried to remove the validators through the form "Reset" but again it's not working. The code which I have tried is:

html

(click)="Rst()";

typescript

Rst(){
  this.formName.reset()
}

Please guide how I should go about it.

edit: I tried the code in this [link] https://medium.com/@kash6062/angular-reset-validation-on-form-reset-533f5d6d76a5

edit 2:I have also tried the code in this [link] https://jasonwatmore.com/post/2019/06/25/angular-8-dynamic-reactive-forms-example

but the code is not working

Answer 1

Use the below code after Reset .

import { ChangeDetectorRef } from '@angular/core';

    constructor(private cd: ChangeDetectorRef) {
      }
         this.cd.detectChanges();

Answer 2

You can try to call a method called "updateValueAndValidity()"

this.formName.updateValueAndValidity()

or if you want to update specific FormControl

this.formName.controls['your_form_control'].updateValueAndValidity()"

And after the code above, you may try to solution from @surendra kumar, which it will explicitly try to reflect or "refresh" the states to a later one.

constructor(private ref: ChangeDetectorRef) { .. }
....
Rst() {
    // After calling updateValueAndValidity
    this.ref.detectChanges();
}