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

Question

I am trying to clear form values as well as validation messages from form on radio button change event but it still display validation message while the form control is empty

 changePaymentType(type) {
    this.myForm.reset();
    this.myForm.clearValidators();
    this.myForm.updateValueAndValidity();

form image after reset and clearvalidator

this is the output that I get after reset() and clearvalidator() method get executed.

If I execute the code in a for loop on each control it do work but then validation stop working on the form controls.

 <input type="text" class="form-control" autocomplete="off" placeholder="Card Name"
               formControlName="cardName">
        <div class="font-red" *ngIf="(f.cardName.touched || f.cardName.dirty || validateCard)  && f.cardName.errors">
          {{getValidationErrors(f.cardName.errors)}}
        </div>

Thats the html code of form control

Does this answer your question? [Angular 5 FormGroup reset doesn't reset validators](https://stackoverflow.com/questions/48216330/angular-5-formgroup-reset-doesnt-reset-validators) — deepakchethan, Jun 08 '21 at 07:10

score 3 · Accepted Answer · answered Jun 08 '21 at 07:13

3

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();

answered Jun 08 '21 at 07:13

ammadkh

569
3
9

thanks for replying, even after using updatevalueandvalidity() it is working same as above – user1593670 Jun 08 '21 at 07:31
1

yes in for loop, do i have to use setValidators again for displaying validation back ? – user1593670 Jun 08 '21 at 11:58
1

yes, you have to compose validators and call updateValueAndValidity function again. – ammadkh Jun 08 '21 at 12:13

score 0 · Answer 2 · answered Jun 08 '21 at 07:09

0

You have to execute updateValueAndValidity().

this.myForm.reset();
this.myForm.clearValidators();
this.myForm.updateValueAndValidity();

answered Jun 08 '21 at 07:09

N.F.

3,844
3
22
53

thanks for replying, even after using updatevalueandvalidity() it is working same as above – user1593670 Jun 08 '21 at 07:31

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

2 Answers2