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

Question

我有一些简单的带有模板的角度2组件。提交后如何清除表单和所有字段？我无法重新加载页面。 设置数据后date.setValue('')字段为stil 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> 

Answer 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

< = RC.3

这将工作：

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

Answer 2

有关于这一个新的讨论（https://github.com/angular/angular/issues/4933）。到目前为止，只有一些允许清除表单的黑客，比如在提交后重新创建整个表单：https://embed.plnkr.co/kMPjjJ1TWuYGVNlnQXrU/

Answer 3

从Angular2 RC5开始，myFormGroup.reset()似乎有效。

Answer 4

我找到了另一个解决方案。这有点hacky，但它在angular2世界广泛可用。

由于* ngIf指令删除表单并重新创建表单，可以简单地将* ngIf添加到表单并将其绑定到某种变量formSuccessfullySent。 =>这将重新创建表单并因此重置输入控件状态。

当然，你也必须清除模型变量。我发现为表单域设置特定的模型类很方便。这样我就可以重置所有字段，就像创建这个模型类的新实例一样简单。 :)

Answer 5

要在提交后重置表单，只需调用this.form.reset()即可。通过调用reset()它会：

1. 马克的控制和子控件原始。
2. 将控件和子控件标记为未触及。
3. 将控件和子控件的值设置为自定义值或null。
4. 更新受影响方的价值/有效性/错误。

请找到这个pull request为一个详细的答案。仅供参考，此公关已合并为2.0.0。

希望这可以是有益的，并让我知道如果您有任何其他问题的Angular2形式。

Answer 6

嗯，现在（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> 

Answer 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(); 
    } 
} 

Answer 8

resetForm(){ 
    ObjectName = {}; 
} 

Answer 9

要角4版，您可以使用此：

this.heroForm.reset(); 

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

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

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

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

Answer 10

让你的.ts呼叫clearForm();文件

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

clearForm() { 

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