En una forma reactiva angular. ¿Cómo restablecer solo el estado del formulario después de un envío exitoso?
Aquí está el proceso:
setValue el valor a partir del resultado del servicio.Cómo mantener los valores modificados y restablecer el formulario a su estado original.
Un form.reset() simplemente vacía el formulario. Pero si no lo llamo, el estado no se restablece y, por ejemplo, mis validaciones según las clases de estado del formulario (prístinas, sucias, válidas, etc.) todavía están allí.
La solución de @smnbbrv funciona bastante bien.
También puede proporcionar su valor de formulario real al método reset().
Dado el hecho de que myReactiveForm es un formulario reactivo en su componente. Después de enviar correctamente su formulario (llamando a un servicio, por ejemplo), puede hacer lo siguiente:
this.myReactiveForm.reset(this.myReactiveForm.value);Restablecerá el formulario y establecerá los valores del formulario "nuevo" en el mismo valor que tenía el formulario.
Este método se puede ver en el ejemplo de Tour of Hero Documento oficial de Angular.io
Eso es bastante fácil:
this.form.markAsPristine(); this.form.markAsUntouched();Esto restablece los metadatos del formulario y el formulario vuelve a estar impecable
Hay una complicación adicional si está utilizando controles de material angular, con mat-error para mostrar sus errores. Dichos errores se muestran en función del resultado de un ErrorStateMatcher (además de cualquier *ngIf que haya aplicado).
El ErrorStateMatcher predeterminado muestra errores basados en un valor booleano:
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean { return !!(control && control.invalid && (control.touched || (form && form.submitted))); }Entonces, lo que esto significa en inglés es:
Si el formulario se envió alguna vez y uno de sus controles deja de ser válido (según las reglas de validación), se mostrará el error.
A menudo, esto no es lo que quieres (¡especialmente si estás leyendo esta pregunta!).
Mirando el código fuente, no hay una manera de establecer el envío submitted = false a menos que llame a resetForm en la directiva ngForm (no el objeto FormGroup). Establecer estados como prístinos o intactos no restablece enviado a falso.
Si está utilizando mat-error , puede que le resulte más fácil crear su propio ErrorStateMatcher (interfaz simple) para una lógica personalizada si esto es un problema.
Nota: ErrorStateMatcher solo está en material angular, y no forma parte de las formas angulares estándar.