如何在Angular 2中提交后清除表单？

也可以看看

https://github.com/angular/angular/issues/6196

https://github.com/angular/angular/issues/6169

https://github.com/angular/angular/issues/4933

https://github.com/angular/angular/issues/4914

https://github.com/angular/angular/issues/6371

从Angular2 RC5开始,myFormGroup.reset()似乎就是这样做的.

要在提交后重置表单,只需调用即可this.form.reset().通过调用reset()它将:

将控件和子控件标记为原始.

将控件和子控件标记为未触及.

将控件和子控件的值设置为自定义值或null.

更新受影响方的价值/有效期/错误.

请找到此拉取请求以获得详细答案.仅供参考,此PR已合并至2.0.0.

希望这可以有所帮助,如果您对Angular2表单有任何其他问题,请告诉我.

import {Component} from '@angular/core';
import {NgForm} from '@angular/forms';
@Component({
    selector: 'example-app',
    template: '

        
        
        Submit
    
    
First name value: {{ first.value }}
    
First name valid: {{ first.valid }}
    
Form value: {{ f.value | json }}
    
Form valid: {{ f.valid }}
',
})
export class SimpleFormComp {
    onSubmit(f: NgForm) {

        // some stuff

        f.resetForm();
    }
}

clearForm();在您的.ts文件中拨打电话

尝试像下面的示例代码片段一样清除表单数据。

clearForm() {

this.addContactForm.reset({
      'first_name': '',
      'last_name': '',
      'mobile': '',
      'address': '',
      'city': '',
      'state': '',
      'country': '',
       'zip': ''
     });
}

对于角度版本4,您可以使用:

this.heroForm.reset();

但是,您可能需要一个初始值,如:

ngOnChanges() {
 this.heroForm.reset({
  name: this.hero.name, //Or '' to empty initial value. 
  address: this.hero.addresses[0] || new Address()
 });
}

在对象引用中解决null问题很重要.

参考链接,搜索"重置表单标志".