Angular 5 FormGroup reset does not execute reset validators

Question

I have a form on my page, and when I call FormGroup.reset()it sets the form class to ng-pristine ng-untouchedbut FormControl.hasError(...)still returns truey. What am I doing wrong here?

template

<form [formGroup]="myForm" (ngSubmit)="submitForm(myForm)">
  <mat-form-field>
    <input matInput formControlName="email" />
    <mat-error *ngIf="email.hasError('required')">
      Email is a required feild
    </mat-error>
  </mat-form-field>
  <mat-form-field>
    <input matInput type="password" formControlName="password" />
    <mat-error *ngIf="password.hasError('required')">
      Password is a required feild
    </mat-error>
  </mat-form-field>
  <button type="submit">Login</button>
</form>

Component

export class MyComponent {
  private myForm: FormGroup;
  private email: FormControl = new FormContorl('', Validators.required);
  private password: FormControl = new FormControl('', Validators.required);

  constructor(
    private formBuilder: FormBuilder
  ) {
    this.myForm = formBuilder.group({
      email: this.email,
      password: this.password
    });
  }

  private submitForm(formData: any): void {
    this.myForm.reset();
  }
}

Plunker

http://embed.plnkr.co/Hlivn4/

Answer 1

He ( FormGroup) behaves correctly. Your form requires a username and password, so when you reset the form must be invalid (i.e. a form without a username / password is invalid).

, , , ( ), . , .

AFAIK, <mat-error> FormGroupDirective, FormGroup, FormGroup reset FormGroupDirective. , <mat-error> reset FormGroupDirective.

:

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

formDirective.resetForm():

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

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

Answer 2

// you can put this method in a module and reuse it as needed
resetForm(form: FormGroup) {

    form.reset();

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

form.clearValidators()

Answer 3

Harry Ninh, formDirective , :

:

<form 
  ...
  #formDirective="ngForm" 
>

:

import { ViewChild, ... } from '@angular/core';
import { NgForm, ... } from '@angular/forms';

export class MyComponent {
 ...
 @ViewChild('formDirective') private formDirective: NgForm;

  constructor(... )

  private someFunction(): void { 
    ...
    formDirective.resetForm();
  }
}

Answer 4

. , mat-form-field formGroup. submitted .

, , , , ngForm formGroup onSubmit(form). @ViewChild('form') form; , this.form.resetForm();

Answer 5

, resetForm() reset() , . . , select() focus() , . setTimeout(). , .

<form [formGroup]="myFormGroup" #myForm="ngForm">
    …
    <button mat-raised-button (click)="submitForm()">
</form>

submitForm() { 
    …
    setTimeout(() => {
        this.myForm.resetForm();
        this.myFormGroup.reset();
    }, 0);
}

Answer 6

-

 this.myForm.get('formCtrlName').reset();
 this.myForm.get('formCtrlName').setValidators([Validators.required, Validators.maxLength(45), Validators.minLength(4), Validators.pattern(environment.USER_NAME_REGEX)]);
 this.myForm.get('formCtrlName').updateValueAndValidity();

Answer 7

Move the submit function from your form to your button and add types for your buttons:

<form [formGroup]="createForm">
  <button (click)="submitForm()" type="submit">Submit</button>
  <button (click)="createForm.reset()" type="reset">Reset</button>
</form>