formgroup - reset ngform angular 4

El reinicio de Angular 5 FormGroup no reinicia los validadores

Question

Tengo un formulario en mi página y cuando llamo a FormGroup.reset() establece la clase de formularios en ng-pristine ng-untouched FormControl.hasError(...) pero FormControl.hasError(...) aún devuelve verdadero. ¿Qué estoy haciendo mal aquí?

Modelo

<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>

Componente

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

Saqueador

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

Answer 1

( FormGroup ) se comporta correctamente. Su formulario requiere nombre de usuario y contraseña, por lo tanto, cuando restablece el formulario, no debe ser válido (es decir, el formulario sin nombre de usuario / contraseña no es válido).

Si entiendo correctamente, su problema aquí es por qué los errores rojos no están allí la primera vez que carga la página (donde el formulario TAMBIÉN no es válido), sino que aparece cuando hace clic en el botón. Este problema es particularmente importante cuando usa Material.

AFAIK, <mat-error> verifica la validez de FormGroupDirective , no FormGroup , y restablecer FormGroup no restablece FormGroupDirective . Es un poco incómodo, pero para borrar <mat-error> también necesitarías restablecer FormGroupDirective .

Para hacer eso, en su plantilla, defina una variable como tal:

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

Y en su clase de componente, llame a formDirective.resetForm() :

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

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

Answer 2

Además de la solución de Harry Ninh, si desea acceder al formulario Directivo en su componente sin tener que seleccionar un botón de formulario, entonces:

Modelo:

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

Componente:

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 3

Descubrí que después de llamar a resetForm () y reset (), el envío no se restableció y se mantuvo como verdadero, lo que provocó la visualización de mensajes de error. Esta solución funcionó para mí. Lo encontré mientras buscaba una solución para llamar a select () y focus () en una etiqueta de entrada, que tampoco funcionaba como se esperaba. Simplemente envuelva sus líneas en un setTimeout (). Es un truco, pero funciona.

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

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

Answer 4

Después de leer los comentarios, este es el enfoque correcto

// 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) ;
    });
}

No hubo necesidad de llamar a form.clearValidators()

Answer 5

Mueva la función de envío de su formulario a su botón y agregue tipos a sus botones:

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

Answer 6

También estaba teniendo el mismo conjunto de problemas. Mi problema era que estaba usando mat-form-field y formGroup . Después de restablecer el formulario submitted indicador no se restableció.

Entonces, la solución que funcionó para mí es poner una directiva de ngForm junto con formGroup y onSubmit(form) . Se @ViewChild(''form'') form; en componente y luego usé this.form.resetForm();