CODEWITHSUNDEEP
angularionic-frameworkionic4angular-forms
sridharan
sridharan

Reputation: 2065

Ionic 4 reset form after submit redirect back error not clear

Ionic 4 reset form after submit redirect home page and give logout return back to login page input value reset but error not clear error its show *password required

    <form #loginForm="ngForm" novalidate >
          <ion-list>
            <ion-item class="inputDesign">
              <ion-input pattern="^(0|[1-9][0-9]*)$" placeholder="Password"  maxlength="6" max="6" min="6" [(ngModel)]="loginForm.password" name="password" type="tel" minlength="6"
                #password="ngModel" required></ion-input>
            </ion-item>
            <ion-text class="errorText" color="danger" *ngIf="password.errors && submitted == true">
              <p [hidden]="!password.errors.required">*Password is required</p>
              <p [hidden]="!password.errors.minlength">*Must be at least 6 characters long</p>
              <p [hidden]="!password.errors.pattern">*Enter only number</p>
            </ion-text>
          </ion-list>
        </form>
<ion-footer text-center >
  <ion-toolbar color="secondary" (click)="onLogin(loginForm)" text-center type="submit">
    <ion-title text-center>Login</ion-title>
  </ion-toolbar> 
</ion-footer>

ts file 

@ViewChild('loginForm') slForm: NgForm;

onLogin(form: NgForm) {
        this.submitted = true;
    this.slForm.reset();
    }

Upvotes: 1

Views: 4099

Answers (2)

gal007
gal007

Reputation: 7202

I had the same problem. This finally worked for me:

this.form.reset();
Object.keys(this.form.controls).forEach(key => {
    this.form.get(key).setErrors(null) ;
});

Upvotes: 0

Gabriel Geelario
Gabriel Geelario

Reputation: 237

This works fine

@ViewChild('loginForm', {static:false}) slForm: NgForm;

onLogin(form: NgForm) {
    this.submitted = true;
    this.slForm.reset();
}

Upvotes: 0

Related Questions