pasar - ¿Cómo borrar el formulario después de enviarlo en Angular 2?

formularios reactivos angular 6

Question

Tengo un componente angular simple 2 con plantilla. ¿Cómo borrar el formulario y todos los campos después de enviar? No puedo recargar la página. Después de establecer los datos con date.setValue('''') campo todavía se touched .

import {Component} from ''angular2/core'';
import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, Control} from ''angular2/common'';

@Component({
    selector: ''loading-form'',
    templateUrl: ''app/loadings/loading-form.component.html'',
    directives: [FORM_DIRECTIVES]
})

export class LoadingFormComponent {
    private form:ControlGroup;
    private date:Control;
    private capacity:Control;

    constructor(private _loadingsService:LoadingsService, fb:FormBuilder) {
        this.date = new Control('''', Validators.required);
        this.capacity = new Control('''', Validators.required);
        this.form = fb.group({
            ''date'': this.date,
            ''capacity'': this.capacity
        });
    }

    onSubmit(value:any):void {
        //send some data to backend
    }
}

loading-form.component.html

<div class="card card-block">
    <h3 class="card-title">Loading form</h3>

    <form (ngSubmit)="onSubmit(form.value)" [ngFormModel]="form">
        <fieldset class="form-group" [class.has-danger]="!date.valid && date.touched">
            <label class="form-control-label" for="dateInput">Date</label>
            <input type="text" class="form-control form-control-danger form-control-success" id="dateInput"
                   min="0" placeholder="Enter loading date"
                   [ngFormControl]="form.controls[''date'']">
        </fieldset>
        <fieldset class="form-group" [class.has-danger]="!capacity.valid && capacity.touched">
            <label class="form-control-label" for="capacityInput">Capacity</label>
            <input type="number" class="form-control form-control-danger form-control-success" id="capacityInput"
                   placeholder="Enter capacity"
                   [ngFormControl]="form.controls[''capacity'']">
        </fieldset>
        <button type="submit" class="btn btn-primary" [disabled]="!form.valid">Submit
        </button>
    </form>
</div>

Answer 1

A partir de Angular2 RC5, myFormGroup.reset() parece hacer el truco.

Answer 2

Así es como lo hago en Angular 7.3

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

Consulte también https://angular.io/docs/ts/latest/guide/reactive-forms.html (sección "restablecer los indicadores de formulario")

> = RC.6

En RC.6 debería ser compatible para actualizar el modelo de formulario. Crear un nuevo grupo de formularios y asignarlos a myForm

[formGroup]="myForm"

también será compatible ( https://github.com/angular/angular/pull/11051#issuecomment-243483654 )

> = RC.5

form.reset();

En el nuevo módulo de formularios (> = RC.5), NgForm tiene un método reset() y también admite un evento de reset formularios. https://github.com/angular/angular/blob/6fd5bc075d70879c487c0188f6cd5b148e72a4dd/modules/%40angular/forms/src/directives/ng_form.ts#L179

<= RC.3

Esto funcionará:

onSubmit(value:any):void {
  //send some data to backend
  for(var name in form.controls) {
    (<Control>form.controls[name]).updateValue('''');
    /*(<FormControl>form.controls[name]).updateValue('''');*/ this should work in RC4 if `Control` is not working, working same in my case
    form.controls[name].setErrors(null);
  }
}

Ver también

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

Answer 4

El siguiente código me funciona en Angular 4

import { FormBuilder, FormGroup, Validators } from ''@angular/forms'';
export class RegisterComponent implements OnInit {
 registerForm: FormGroup; 

 constructor(private formBuilder: FormBuilder) { }   

 ngOnInit() {
    this.registerForm = this.formBuilder.group({
      empname: [''''],
      empemail: ['''']
    });
 }

 onRegister(){
    //sending data to server using http request
    this.registerForm.reset()
 }

}

Answer 5

Encontré otra solución. Es un poco hacky pero está ampliamente disponible en angular2 world.

Dado que la directiva * ngIf elimina el formulario y lo recrea, uno simplemente puede agregar un * ngIf al formulario y vincularlo a algún tipo de variable formSuccessfullySent . => Esto recreará el formulario y, por lo tanto, restablecerá los estados de control de entrada.

Por supuesto, también debe borrar las variables del modelo. Me pareció conveniente tener una clase de modelo específica para mis campos de formulario. De esta manera, puedo restablecer todos los campos tan simple como crear una nueva instancia de esta clase de modelo. :)

Answer 6

Hacer una llamada clearForm(); en su archivo .ts

Pruebe como el fragmento de código de ejemplo a continuación para borrar los datos de su formulario.

clearForm() {

this.addContactForm.reset({
      ''first_name'': '''',
      ''last_name'': '''',
      ''mobile'': '''',
      ''address'': '''',
      ''city'': '''',
      ''state'': '''',
      ''country'': '''',
       ''zip'': ''''
     });
}

Answer 7

Hay una nueva discusión sobre esto ( https://github.com/angular/angular/issues/4933 ). Hasta ahora solo hay algunos hacks que permiten borrar el formulario, como recrear todo el formulario después de enviarlo: https://embed.plnkr.co/kMPjjJ1TWuYGVNlnQXrU/

Answer 8

Hm, ahora (23 de enero de 2017 con angular 2.4.3) hice que funcionara así:

newHero() {
    return this.model = new Hero(42, ''APPLIED VALUE'', '''');
}
<button type="button" class="btn btn-default" (click)="heroForm.resetForm(newHero())">New Hero</button>

Answer 9

Para la versión angular 4, puede usar esto:

this.heroForm.reset();

Pero, podría necesitar un valor inicial como:

ngOnChanges() {
 this.heroForm.reset({
  name: this.hero.name, //Or '''' to empty initial value. 
  address: this.hero.addresses[0] || new Address()
 });
}

Es importante resolver un problema nulo en su referencia de objeto.

link referencia, busque "restablecer los indicadores de formulario".

Answer 10

Para restablecer su formulario después de enviarlo, simplemente puede invocar this.form.reset() . Al llamar a reset() :

1. Marque el control y los controles secundarios como inmaculados .
2. Marque el control y los controles secundarios como intactos .
3. Establezca el valor de control y controles secundarios en valor personalizado o nulo .
4. Actualizar valor / validez / errores de las partes afectadas.

Encuentre esta solicitud de extracción para obtener una respuesta detallada. Para su información, este PR ya se ha fusionado con 2.0.0.

Espero que esto pueda ser útil y avíseme si tiene alguna otra pregunta con respecto a Angular2 Forms.

Answer 11

import {Component} from ''@angular/core'';
import {NgForm} from ''@angular/forms'';
@Component({
    selector: ''example-app'',
    template: ''<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
        <input name="first" ngModel required #first="ngModel">
        <input name="last" ngModel>
        <button>Submit</button>
    </form>
    <p>First name value: {{ first.value }}</p>
    <p>First name valid: {{ first.valid }}</p>
    <p>Form value: {{ f.value | json }}</p>
    <p>Form valid: {{ f.valid }}</p>'',
})
export class SimpleFormComp {
    onSubmit(f: NgForm) {

        // some stuff

        f.resetForm();
    }
}

Answer 12

resetForm(){
    ObjectName = {};
}