Tengo un componente angular 2 simple 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('') , 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>Ver también https://angular.io/docs/ts/latest/guide/reactive-forms.html (sección "restablecer las banderas de formulario")
>=RC.6
En RC.6 se debe soportar actualizar el modelo de formulario. Creación de un nuevo grupo de formularios y asignación 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 de 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
A partir de Angular2 RC5, myFormGroup.reset() parece funcionar.
Para restablecer su formulario después de enviarlo, simplemente puede invocar this.form.reset() . Al llamar a reset() hará lo siguiente:
Encuentre esta solicitud de extracción para obtener una respuesta detallada. FYI, 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 los formularios Angular2.