我有一些带有模板的简单 Angular 2 组件。提交后如何清除表单和所有字段?我无法重新加载页面。
设置数据后date.setValue('')
场依然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
}
}
加载表单.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>
也可以看看https://angular.io/docs/ts/latest/guide/reactive-forms.html https://angular.io/docs/ts/latest/guide/reactive-forms.html(“重置表单标志”部分)
>=RC.6
RC.6中应该支持更新表单模型。创建一个新的表单组并分配给myForm
[formGroup]="myForm"
也将得到支持(https://github.com/angular/angular/pull/11051#issuecomment-243483654 https://github.com/angular/angular/pull/11051#issuecomment-243483654)
>=RC.5
form.reset();
在新的表单模块中(>= RC.5)NgForm
has a reset()
方法,还支持表单reset
event.
https://github.com/angular/angular/blob/6fd5bc075d70879c487c0188f6cd5b148e72a4dd/modules/%40angular/forms/src/directives/ng_form.ts#L179 https://github.com/angular/angular/blob/6fd5bc075d70879c487c0188f6cd5b148e72a4dd/modules/%40angular/forms/src/directives/ng_form.ts#L179
这将起作用:
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);
}
}
也可以看看
- https://github.com/angular/angular/issues/6196 https://github.com/angular/angular/issues/6196
- https://github.com/angular/angular/issues/6169 https://github.com/angular/angular/issues/6169
- https://github.com/angular/angular/issues/4933 https://github.com/angular/angular/issues/4933
- https://github.com/angular/angular/issues/4914 https://github.com/angular/angular/issues/4914
- https://github.com/angular/angular/issues/6371 https://github.com/angular/angular/issues/6371
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)