J'ai un simple composant angulaire 2 avec un modèle. Comment effacer le formulaire et tous les champs après l'envoi?. Je ne peux pas recharger la page. Après avoir défini les données avec le date.setValue('')
champ est toujours 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>
pristine
, ..., reconstruire le formulaire est actuellement la seule option.