angular - 模型驱动表单提交后如何清除表单？（角度 2）

Question

模型驱动表单提交后如何清除表单？我必须使用ngModel吗？谢谢

<form [ngFormModel]="myForm" (ngSubmit)="onSubmit()">
    <input type="text" [ngFormControl]="name">
    <button type="submit">Submit</button>
</form>

.

myForm: ControlGroup;
name: AbstractControl;

ngOnInit()
{
    this.myForm = this._formBuilder.group({
        'name': [""]
    });
    this.name = this.myForm.controls['name'];
}


onSubmit() {
    this.name.value = ""; // This is not working.
}

Answer 1

从更新的 angular2 版本开始，angular2 为我们提供reset了重置表单所有控件的功能，只需使用此语法即可。

this.Your_form_name.reset();

PS：表单提交后，如果您重新初始化表单，它可能会清除一次值但状态根本不会重置，我的意思是表单将不再处于脏状态（验证观点）。

有关更多详细信息，请参阅此处

https://angular.io/docs/ts/latest/guide/forms.html

Answer 2

您可以迭代控件this.myForm.controls并调用updateValue(). 否则请参阅https://github.com/angular/angular/issues/4933

Answer 3

您所要做的就是再次重新初始化表单，如下所示：

this.myForm = this._formBuilder.group({
    'name': [""]
});

这会将 formControlName 字段重置为空

Answer 4

如果您有一些服务器验证，另一种有用的方法是这样做：

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
    ...
</form>

和

import { NgForm } from '@angular/forms';
onSubmit(myForm: NgForm) {
    // do something and if no error
    myForm.reset();
}