How to clear the error messages of form through reset button/after cancel the form

Question

I am unable to clear the error outline around the input box and error messages below the input box. When I canceled the form or I onclick of reset button, it has to clear the content of input fields and error messages both but its only clearing the content the error messages are not cleared.

I am currently using this.formname.reset() which clears fileds but not error messages.
I am using Angular7.

TS file

loginForm: FormGroup;
 validation() {
        this.loginForm = this.formBuilder.group({
            userName: ['', Validators.required],
            password: ['', Validators.required]
        });
    }
 clearFields() {
          this.loginForm.reset();
          this.validation()
    }

HTML code

<form #formDirective="ngForm" [formGroup]="loginForm" (ngSubmit)="onSubmit()">
            <div class="form-group">
                <label for="username">Username</label> <input type="text"
                    formControlName="userName" class="form-control"
                    placeholder="User name"
                    [ngClass]="{ 'is-invalid': submitted && f.userName.errors }" />
                <div *ngIf="submitted && f.userName.errors" class="invalid-feedback">
                    <div *ngIf="f.userName.errors.required">Username is required</div>
                </div>
            </div>
            <div class="form-group">
                <label for="password">Password</label> <input type="password"
                    formControlName="password" class="form-control"
                    [ngClass]="{ 'is-invalid': submitted && f.password.errors }"
                    placeholder="Password" />
                <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
                    <div *ngIf="f.password.errors.required">Password is required</div>
                </div>
            </div>
            <div class="form-group text-center">
                <button class="btn btn-primary" (click)="onSubmit();">Login</button>
                &nbsp;
                <button type="button" class="btn btn-light"
                    (click)="clearFields();">cancel</button>
            </div>
        </form>

Please add the corresponding code to the question to make a working example of what you have, this helps the SO community to better answer your question [Minimal, Complete and Verifiable](https://stackoverflow.com/help/mcve) — Farhat Zaman, Feb 19 '19 at 11:14

score 0 · Answer 1 · answered Feb 19 '19 at 11:36

0

Again you are invoking the function this.validation() remove that line from the clearFields() function

clearFields() {
          this.loginForm.reset();
          this.validation()
    }

answered Feb 19 '19 at 11:36

Sivaramakrishnan

689
1
4
11

Still no luck. Same issue – Madhavi Feb 19 '19 at 11:48

score 0 · Accepted Answer · answered Feb 19 '19 at 11:47

0

In addition to Sivaramakrishnan's answer, you might want to also check this answer of a similar question asked before.

answered Feb 19 '19 at 11:47

Pushkar Adhikari

510
2
9

I followed like the post you suggested. I used like same but for some reason this.myNgForm is gettign as undefined. Any idea why its happening? – Madhavi Feb 19 '19 at 12:04
I see there is a boolean `submitted` in your code. Are you resetting it to `false` when you call `clearFields`? – Pushkar Adhikari Feb 19 '19 at 12:20
Thats right I did that on changing few things it removed it seems. I added now its working as expected.Thanks a lot for help. – Madhavi Feb 19 '19 at 12:28
Great, happy to help. Do add solution or mark as answered for future users. Good luck. – Pushkar Adhikari Feb 20 '19 at 04:10

How to clear the error messages of form through reset button/after cancel the form

2 Answers2