angular - tablas - Establecer el formulario en Pristine sin borrar los datos

tablas en angular 6

Question

Tengo un formulario que muestra una lista de elementos <input type="text"> . Todos comparten un botón de guardar común que está desactivado hasta que el formulario se ensucie. Luego, una vez que el usuario haga clic en el botón Guardar, los datos se enviarán al servidor. Si el servidor guardó con éxito los datos, quiero restablecer el formulario a un estado prístino, pero quiero mantener todos los datos en el formulario para que el usuario pueda editar los datos más adelante si así lo desea.

Después de buscar, encontré el método NgForm.reset() . Si bien esto establece la forma de prístina, desafortunadamente también borra la forma. El método de reinicio parece tener un parámetro de valor, pero parece que no puedo averiguar qué hace. Sin embargo, no quiero que se borren los datos.

También probé myForm.pristine = true , pero esto causa una recarga de la página por alguna razón.

Aquí hay un plunkr demostrando el problema .

Answer 1

Por el momento, puedo sugerir dos posibles soluciones. El primero está muy cerca de lo que ha sugerido, ya que el método de reset del formulario tiene la siguiente firma y acepta el valor del formulario como primer argumento:

//@angular/forms/src/model.d.ts:
reset(value?: any, {onlySelf}?: { onlySelf?: boolean; }): void;

En el controlador de envío, capturaremos una copia del último estado:

const { myForm: { value: formValueSnap } } = this;

Y haz el reinicio mismo:

this.myForm.reset(formValueSnap, false);

Otra opción de la época, cuando no había posibilidad de restablecer el formulario, es crear un método auxiliar, que marcará cada control como pristine y conservará los datos. Se puede invocar en el mismo asistente de envío en lugar del restablecimiento.

private _markFormPristine(form: FormGroup | NgForm): void {
Object.keys(form.controls).forEach(control => {
form.controls[control].markAsPristine();
});
}

Enlace al plunkr actualizado.

Answer 2

Si está utilizando formularios @ViewChild(''myForm'') myform: any; plantillas y tiene algo así en su componente: @ViewChild(''myForm'') myform: any;

Descubrí que markAsPristine() es una función en la propiedad de formulario de su formulario. Entonces sería this.myform.form.markAsPristine() .

Solo pensé en agregar esto en caso de que otros se encuentren con markAsPristine() como no definido.

Answer 3

No he encontrado un markAsPristine () en la propiedad del form , pero encontré una propiedad this.myForm[''form'']._pristine , this.myForm[''form'']._pristine que se puede establecer en true .

@ViewChild(''myForm'') myForm: ElementRef;
this.myForm[''form'']._pristine = true;

Answer 4

Creo que resolví esto en mi método:

form.controls[''contato''].reset();

Answer 5

Lo que estás buscando es myForm.markAsPristine() .