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

Question

我有一些带有模板的简单 angular 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>

score 167 · Accepted Answer

另请参阅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);
  }
}

也可以看看

score 37 · Accepted Answer

37

从 Angular2 RC5 开始，myFormGroup.reset()似乎可以解决问题。

于 2016-08-21T23:54:26.893 回答

score 13 · Accepted Answer

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

将控件和子控件标记为pristine。
将控件和子控件标记为untouched。
将控件和子控件的值设置为自定义值或null。
更新受影响方的价值/有效性/错误。

请找到这个拉取请求以获得详细的答案。仅供参考，此 PR 已合并到 2.0.0。

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

score 12 · Accepted Answer

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

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

clearForm() {

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

score 12 · Accepted Answer

这是我在 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()

score 10 · Accepted Answer

这是我如何在Angular 8中做到的：

获取表单的本地参考：

<form name="myForm" #myForm="ngForm"></form>

@ViewChild('myForm', {static: false}) myForm: NgForm;

每当您需要重置表单时，请调用resetForm方法：

this.myForm.resetForm();

你需要FormsModulefrom@angular/forms才能让它工作。请务必将其添加到您的模块导入中。

score 9 · Accepted Answer

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

score 6 · Accepted Answer

对于角度版本 4，您可以使用以下命令：

this.heroForm.reset();

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

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

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

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

score 4 · Accepted Answer

4

this.myForm.reset();

这已经足够了......您可以获得所需的输出

于 2020-01-08T12:49:44.370 回答

score 3 · Accepted Answer

对此有一个新的讨论（https://github.com/angular/angular/issues/4933）。到目前为止，只有一些技巧可以清除表单，例如在提交后重新创建整个表单：https ://embed.plnkr.co/kMPjjJ1TWuYGVNlnQXrU/

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

要在提交时重置完整的表单，您可以在 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 。

score 0 · Accepted Answer

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

score 0 · Accepted Answer

下面的代码适用于 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()
 }

}

score -3 · Accepted Answer

-3

resetForm(){
    ObjectName = {};
}

于 2017-06-30T10:19:10.083 回答

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

15 回答 15

Related

Reference