Angular 在第二阶段提交后如何清除表格？

我有一些简单的带模板的角度2组件。提交后如何清除表单和所有字段？。我无法重新加载页面。 使用

日期设置数据后。设置值（“”）

字段仍然

被触摸

从'angular2/core'导入{Component}；
从“angular2/common”导入{FORM_指令、FormBuilder、ControlGroup、Validators、Control}；
@组成部分({
选择器：“正在加载表单”，
templateUrl:'app/loadings/loading form.component.html'，
指令：[格式指令]
})
导出类装入FormComponent{
私有形式：控制组；
私人日期：控制；
私人能力：控制；
构造函数（私有加载服务：加载服务，fb:FormBuilder）{
this.date=新控件（“”，需要验证器）；
此容量=新控件（“”，需要验证器）；
this.form=fb.group({
“date”：this.date，
“容量”：此参数为0.capacity
});
}
onSubmit（值：任意）：无效{
//将一些数据发送到后端
}
}

加载-form.component.html

装载形式
日期
容量
提交

另请参见（“重置表单标志”一节）

=RC.6

在RC.6中，应该支持更新表单模型。创建新表单组并分配给

myForm

[formGroup]=“myForm”

也将被支持（）

=RC.5

form.reset（）；

在新表单模块（>=RC.5）中，

NgForm

有一个

reset（）

方法，还支持表单

reset

事件。

---

关于这一点有一个新的讨论（）。到目前为止，只有一些黑客可以清除表单，比如在提交后重新创建整个表单：

从Angular2 RC5开始，

myFormGroup.reset（）

似乎可以解决问题。

我找到了另一个解决方案。它有点粗糙，但在angular2世界中广泛使用

由于*ngIf指令删除表单并重新创建它，因此只需将*ngIf添加到表单并将其绑定到某种

formSuccessfullySent

变量即可这将重新创建表单，从而重置输入控件状态

---

当然，还必须清除模型变量。我发现为表单字段提供一个特定的模型类很方便。通过这种方式，我可以重置所有字段，就像创建此模型类的新实例一样简单。：）

要在提交后重置表单，只需调用

this.form.reset（）

。通过调用

reset（）

它将：

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

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

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

更新受影响方的值/有效性/错误

请找到这个详细的答案。仅供参考，该PR已合并为2.0.0

希望这能对您有所帮助，如果您对Angular2表格有任何其他问题，请告诉我。

Hm，现在（2017年1月23日，angular 2.4.3版）我让它这样工作：

newHero() {
    return this.model = new Hero(42, 'APPLIED VALUE', '');
}
<button type="button" class="btn btn-default" (click)="heroForm.resetForm(newHero())">New Hero</button>

newHero（）{
返回this.model=新英雄（42，‘应用值’，“”）；
}
新英雄

从'@angular/core'导入{Component}；
从'@angular/forms'导入{NgForm}；
@组成部分({
选择器：“示例应用程序”，
模板：'
提交
名字值：{{First.value}}

名字有效：{{First.valid}

表单值：{f.value | json}

格式有效：{f.valid}
'，
})
导出类SimpleFormComp{
onSubmit（f:NgForm）{
//一些东西
f、 resetForm（）；
}
}

对于angular version 4，您可以使用：

this.heroForm.reset();

但是，您可能需要一个初始值，如：

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

解决对象引用中的空问题很重要

---

参考，搜索“重置表单标志”

打个电话

clearForm（）在.ts文件中

尝试使用下面的示例代码片段清除表单数据

clearForm() {

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

下面是我在Angular 7.3中的实现方法

// you can put this method in a module and reuse it as needed
resetForm(form: FormGroup) {

    form.reset();

    Object.keys(form.controls).forEach(key => {
      form.get(key).setErrors(null) ;
    });
}

无需调用
表单。下面的clearValidators（）
代码在Angular 4中对我有效

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
export class RegisterComponent implements OnInit {
 registerForm: FormGroup; 

 constructor(private formBuilder: FormBuilder) { }   

 ngOnInit() {
    this.registerForm = this.formBuilder.group({
      empname: [''],
      empemail: ['']
    });
 }

 onRegister(){
    //sending data to server using http request
    this.registerForm.reset()
 }

}

以下是我如何做到这一点的：

获取表单的本地引用：



@ViewChild（'myForm'，{static:false}）myForm:NgForm；

无论何时需要重置表单，请调用
resetForm
方法：

this.myForm.resetForm（）；


您需要
@angular/forms
中的
表单模块
，它才能工作。确保将其添加到模块导入中。
this.myForm.reset（）

这就足够了…您可以获得所需的输出
要在提交时重置完整的表单，您可以在Angular中使用reset（）。下面的示例在Angular 8中实现。
下面是一个订阅表单，我们将电子邮件作为输入

<form class="form" id="subscribe-form" data-response-message-animation="slide-in-left" #subscribeForm="ngForm"
(ngSubmit)="subscribe(subscribeForm.value); subscribeForm.reset()">
<div class="input-group">
   <input type="email" name="email" id="sub_email" class="form-control rounded-circle-left"
      placeholder="Enter your email" required ngModel #email="ngModel" email>
   <div class="input-group-append">
      <button class="btn btn-rounded btn-dark" type="submit" id="register"
         [disabled]="!subscribeForm.valid">Register</button>
   </div>
</div>
</form>


登记

参考官方文件：
 @masel.popowo是的，如果你想要
原始的
，…，那么重建表单是目前唯一的选择。@günter-zöchbauer如何重建表单？我自己还没有尝试过，但我想你应该放弃控制组，创建一个新的。将代码移到函数中，以便在必要时可以重复调用它。+1表示setErrors（）。顺便提一下，我在这里记录了一个错误，我犯了一个错误，如果其他人做了类似的事情：如果你使用占位符，例如“foo”，不要调用control.updateValue（“foo”），而是调用control.setValue（null），我不知道控件上的
setValue（）
方法。仅
updateValue（）
Addition:我正在使用AngularDart，它还没有这样的重置方法。或者至少我现在没有发现DWith RC.6 j
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
export class RegisterComponent implements OnInit {
 registerForm: FormGroup; 

 constructor(private formBuilder: FormBuilder) { }   

 ngOnInit() {
    this.registerForm = this.formBuilder.group({
      empname: [''],
      empemail: ['']
    });
 }

 onRegister(){
    //sending data to server using http request
    this.registerForm.reset()
 }

}

<form class="form" id="subscribe-form" data-response-message-animation="slide-in-left" #subscribeForm="ngForm"
(ngSubmit)="subscribe(subscribeForm.value); subscribeForm.reset()">
<div class="input-group">
   <input type="email" name="email" id="sub_email" class="form-control rounded-circle-left"
      placeholder="Enter your email" required ngModel #email="ngModel" email>
   <div class="input-group-append">
      <button class="btn btn-rounded btn-dark" type="submit" id="register"
         [disabled]="!subscribeForm.valid">Register</button>
   </div>
</div>
</form>