reactivos - Cómo restablecer la validación del formulario al enviar el formulario en ANGULAR 2

validar formulario angular 5

Question

Tengo que restablecer mi formulario junto con la validación. ¿Hay algún método para restablecer el estado de la forma de ng-dirty a ng-pristine?

Answer 1

A partir de la respuesta de Benny Bottema , pude restablecer el formulario, incluidas las validaciones utilizando resetForm () en Angular 6.

class YourComponent {
@ViewChild("yourForm")
yourForm: NgForm;
onSubmit(): void {
doYourThing();
this.yourForm.resetForm();
}
}

Answer 2

Así es como funciona actualmente con Angular 4.1.0 - 5.1.3:

class YourComponent {
@ViewChild("yourForm")
yourForm: NgForm;
onSubmit(): void {
doYourThing();
// yourForm.reset(), yourForm.resetForm() don''t work, but this does:
this.yourForm.form.markAsPristine();
this.yourForm.form.markAsUntouched();
this.yourForm.form.updateValueAndValidity();
}
}

Answer 3

En versiones más actuales (Angular 2.4.8 en mi caso) es fácil:

Marca un control como prestine y por lo tanto nuevamente válido.

private resetFormControlValidation(control: AbstractControl) {
control.markAsPristine();
control.markAsUntouched();
control.updateValueAndValidity();
}

Answer 4

Esto me funcionó en Angular 5.

<form #myForm = "ngForm" (submit)="callMyAPI(); myForm.resetForm()">

Esto restablece tanto los valores de forma como las validaciones.

Answer 5

Estoy haciendo esto en RC.5, defino mis elementos de formulario en una plantilla.

<form (ngSubmit)="submit(); form.reset()" #form="ngForm">

Pasar el formulario para enviarlo o verlo con ViewChild no funcionó en absoluto, esto es lo suficientemente bueno para mí en este momento.

Answer 6

No parece haber apoyo para eso todavía. Una solución que he visto es recrear el formulario después del envío, que obviamente es engorroso y feo.

Ver también

• https://github.com/angular/angular/issues/6196
• https://github.com/angular/angular/issues/4933
• https://github.com/angular/angular/issues/5568
• https://github.com/angular/angular/issues/4914

Answer 7

Recientemente he considerado esto porque actualmente (mayo de 2016) no se ha diseñado nada en Angular2 para esto todavía.

Teniendo en cuenta que el usuario no puede ingresar ''indefinido'' o ''nulo'' y la validación se usa principalmente para mostrar errores de formulario al usuario, luego simplemente restablece los valores de control a Nulo

myControl.updateValue(null);

Deberá agregar esta condición cuando decida mostrar los errores de control en su interfaz de usuario simplemente agregando

if (myControl.value !== undefined && myControl.value !== null) {
//then there is reason to display an error
}

(esta verificación porque Validators.Required trata el contenido en blanco como válido)

Espero que esto ayude.

Answer 8

Si utiliza formularios controlados por modelo, es decir, ngFormModel, la definición del grupo de control una vez más después de enviarlo resolverá esto. Refiérase a este link

Answer 9

from.resetForm ()

He intentado casi todo, y lo único que encontré que realmente restablece form.submitted a false es lo siguiente:

En su plantilla, envíe su formulario a la función de envío:

<form name="form" class="form-horizontal" (ngSubmit)="f.form.valid && submit(f)" #f="ngForm" novalidate>

En su archivo component.ts, tenga lo siguiente:

// import NgForm
import { NgForm } from ''@angular/forms'';
// get the passed in variable from the html file
submit(myForm: NgForm): void {
console.log(myForm.form.status, myForm.form.dirty, myForm.form.pristine, myForm.form.untouched, myForm.submitted, myForm.dirty, myForm.pristine, myForm.untouched);
// This is the key!
myForm.resetForm();
console.log(myForm.form.status, myForm.form.dirty, myForm.form.pristine, myForm.form.untouched, myForm.submitted, myForm.dirty, myForm.pristine, myForm.untouched);
}

Los valores de console.log generan lo siguiente: observe que restablece todos los valores.

VÁLIDO verdadero falso falso verdadero verdadero falso falso

INVALIDO falso verdadero verdadero falso falso verdadero verdadero