在Angular 2中提交后如何清除表单？
Posted
技术标签:
【中文标题】在Angular 2中提交后如何清除表单？【英文标题】：How to clear form after submit in Angular 2? 【发布时间】：2016-04-16 23:18:45 【问题描述】：我有一些带有模板的简单 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
加载-form.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>
【问题讨论】：
【参考方案1】：另见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)
>=RC.5
form.reset();
在新的表单模块 (>= RC.5) NgForm 有一个 reset() 方法，还支持一个表单 reset 事件。
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/6169 https://github.com/angular/angular/issues/4933 https://github.com/angular/angular/issues/4914 https://github.com/angular/angular/issues/6371【讨论】：
@masel.popowo 是的，如果你想要pristine，...，那么重建表单是目前唯一的选择。
@günter-zöchbauer 你如何重建表格？
我自己还没有尝试过，但我想你只是放弃控制组并创建一个新的。将代码移动到一个函数中，以便您可以在必要时重复调用它。
+1 用于 setErrors()。顺便说一句，我在这里记录了一个错误，以防其他人做类似的事情：如果您使用占位符，例如'foo' 不调用 control.updateValue('foo') 而是调用 control.setValue(null)
我不知道setValue() 控制方法。仅限updateValue()github.com/angular/angular/blob/master/modules/angular2/src/…【参考方案2】：
从 Angular2 RC5 开始，myFormGroup.reset() 似乎可以解决问题。
【讨论】：
这适用于 Angular 4，用于重置表单验证【参考方案3】：要在提交后重置表单，您只需调用this.form.reset()。通过调用reset()，它将：
-
将控件和子控件标记为原始。
将控件和子控件标记为未触及。
将控件和子控件的值设置为自定义值或null。
更新受影响方的价值/有效性/错误。
请查找此pull request 以获得详细答案。仅供参考，此 PR 已合并到 2.0.0。
希望这会有所帮助，如果您对 Angular2 Forms 有任何其他问题，请告诉我。
【讨论】：
如果我使用重置，则不会应用验证。我怎样才能使两者都工作？【参考方案4】：在您的 .ts 文件中拨打电话 clearForm();
尝试像下面的示例代码 sn-p 来清除您的表单数据。
clearForm()
this.addContactForm.reset(
'first_name': '',
'last_name': '',
'mobile': '',
'address': '',
'city': '',
'state': '',
'country': '',
'zip': ''
);
【讨论】：
【参考方案5】：这是我在 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) ;
);
无需致电form.clearValidators()
【讨论】：
这是最好的（并且只对我有用）解决方案，用于清除使用 FormBuilder 构建的具有验证器控件的表单。 这是迄今为止我发现的关于清除响应式表单的最佳解决方法。谢谢@Mauricio 我花了一段时间才找到那个方法，这就是我分享它的原因;-)【参考方案6】：Angular 8 我是这样做的：
获取表单的本地参考：
<form name="myForm" #myForm="ngForm"></form>
@ViewChild('myForm', static: false) myForm: NgForm;
并且每当您需要重置表单时，请调用resetForm 方法：
this.myForm.resetForm();
您需要来自@angular/forms 的FormsModule 才能工作。请务必将其添加到您的模块导入中。
【讨论】：
@ViewChild 在 Angular 8 中需要 2 个参数。 @ViewChild('myForm', static: false) myForm: NgForm;【参考方案7】：
import Component from '@angular/core';
import NgForm from '@angular/forms';
@Component(
selector: 'example-app',
template: '<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
<input name="first" ngModel required #first="ngModel">
<input name="last" ngModel>
<button>Submit</button>
</form>
<p>First name value: first.value </p>
<p>First name valid: first.valid </p>
<p>Form value: f.value | json </p>
<p>Form valid: f.valid </p>',
)
export class SimpleFormComp
onSubmit(f: NgForm)
// some stuff
f.resetForm();
【讨论】：
@ 当我们必须清除所有字段时，这很好用。但是我们如何实现相同的方法来只清除某些字段呢？【参考方案8】：到 Angular 版本 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 问题很重要。
参考link，搜索“重置表单标志”。
【讨论】：
谢谢，它对我有用。这就是我想要的。【参考方案9】：this.myForm.reset();
这就够了……你可以得到想要的输出
【讨论】：
添加更多解释这行代码如何解决问题【参考方案10】：有一个关于此的新讨论 (https://github.com/angular/angular/issues/4933)。到目前为止，只有一些技巧可以清除表单，例如在提交后重新创建整个表单：https://embed.plnkr.co/kMPjjJ1TWuYGVNlnQXrU/
【讨论】：
最后我们有了一个正确的方法：github.com/angular/angular/pull/9974【参考方案11】：我找到了另一个解决方案。它有点 hacky，但它在 angular2 世界中广泛使用。
由于 *ngIf 指令删除表单并重新创建它，因此可以简单地将 *ngIf 添加到表单并将其绑定到某种formSuccessfullySentvariable。 => 这将重新创建表单并因此重置输入控件状态。
当然，您还必须清除模型变量。我发现为我的表单字段设置一个特定的模型类很方便。这样，我可以像创建这个模型类的新实例一样简单地重置所有字段。 :)
【讨论】：
补充：我正在使用 AngularDart，它还没有这样的重置方法。或者至少我现在没有发现它。 :D 使用 RC.6 只需重新初始化表单模型即可。如果您将创建表单模型移动到一个方法，调用此方法将重置表单。 @GünterZöchbauer 哦，太好了！我也迫不及待地想在 Angular2 for Dart 中拥有这个功能！ :) 因为我的方法是一个问题：我的表单中有一个所有输入元素的列表。我通过ngAfterViewInit 中的 dart-native querySelectorAll 获得这些。我使用此列表将下一个输入元素集中在 keydown.enter 上，而不是提交表单。使用 ngIf 重新初始化表单时，此列表会中断。 :(
好的，我解决了这个问题。当我重置表单模型时，我可以重新查询 InputElement 实例。【参考方案12】：
要在提交时重置完整的表单，您可以在 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>
参考官方文档：https://angular.io/guide/forms#show-and-hide-validation-error-messages。
【讨论】：
【参考方案13】：嗯，现在（2017 年 1 月 23 日，角度为 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>
【讨论】：
【参考方案14】：以下代码在 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()
【讨论】：
【参考方案15】：resetForm()
ObjectName = ;
【讨论】：
虽然此代码可能会回答问题，但您应该添加解释说明为什么/如何解决问题。 它不会将 'touched'、'pristine' 等类设置回其原始值。 @Shivendra 这可能特别适用于您的问题，但不是通用的。您将object 设为空，而不是 form。以上是关于在Angular 2中提交后如何清除表单？的主要内容，如果未能解决你的问题，请参考以下文章