如何在以模型驱动的形式提交后清除表单？ （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();
}