提交后在Angular 2中重置表单

Question

我知道Angular 2目前缺乏一种方法可以轻松地将表单重置为原始状态.我找到了一个类似下面的解决方案来重置表单字段.

有人建议我需要删除控制组并创建一个新的控制组来重建表单作为原始.我很难找到最好的方法来做到这一点.我知道我需要在一个函数中包装表单构建,但是在构造函数中执行此操作时遇到错误.

重建控件组以完全重置表单的最佳方法是什么？

class App {

    name: Control;
    username: Control;
    email: Control;

    form: ControlGroup;

    constructor(private builder: FormBuilder) {

        this.name = new Control('', Validators.required);
        this.email = new Control('', Validators.required);
        this.username = new Control('', Validators.required);

        this.form = builder.group({
            name: this.name,
            email: this.email,
            username: this.username
        });
    }

    onSubmit(value: any): void {  
        // code that happens when form is submitted
        // then reset the form
        this.reset();
    }

    reset() {
        for (let name in this.form.controls) {
            this.form.controls[name].updateValue('');
            this.form.controls[name].setErrors(null);
        }
    }
}

Answer 1

> = RC.6

支持重置表单并维护submitted状态.

console.log(this.form.submitted);

this.form.reset()

要么

this.form = new FormGroup()...;

更新

要获得仅在创建表单时初始化的更新内容,需要进行一些额外的测量

<form *ngIf="showForm"

Plunker的例子

原始<= RC.5 只需将创建表单的代码移动到方法并在处理提交后再次调用它:

  showForm:boolean = true;

  onSubmit(value:any):void {
    this.showForm = false;
    setTimeout(() => {
    this.reset()
      this.showForm = true;
    });
  }

Plunker的例子

Answer 2

使用NgForm's .resetForm()而不是.reset()因为它是在NgForm公共API中正式记录的方法.(参考文献[ 1 ])

<form (ngSubmit)="mySubmitHandler(); myNgForm.resetForm()" #myNgForm="ngForm">

该.resetForm()方法将重置NgForm's FormGroup并将其submit标志设置为false(参见[ 2 ]).

在@angular版本2.4.8和4.0.0-rc3中测试

Answer 3

对于Angular 2 Final,我们现在有一个新的API可以干净地重置表单:

@Component({...})
class App {

    form: FormGroup;
     ...
    reset() {
       this.form.reset();
   }
}

此API不仅重置表单值,还将表单字段状态设置为ng-pristine和ng-untouched.

Answer 4

当我浏览表格上的Angular基础知识指南,并点击重置表格部分时,当我阅读以下关于他们给出的解决方案时,我非常惊讶.

这是一个临时的解决方法,我们等待正确的表单重置功能.

我个人还没有测试过他们提供的解决方法是否有效(我认为确实如此),但我认为它不是很整洁,并且必须有更好的方法来解决这个问题.

根据FormGroup API(标记为稳定),已经有一个'重置'方法.

我尝试了以下内容.在我的template.html文件中

<form (ngSubmit)="register(); registrationForm.reset();" #registrationForm="ngForm">
    ...
</form>

请注意,在表单元素中,我初始化了一个模板引用变量'registrationForm'并将其初始化为ngForm指令,该指令 "作为一个整体管理表单".这使我可以访问管理FormGroup的方法和属性,包括reset()方法.

将此方法调用绑定到ngSubmit事件,如上所示,在register()方法完成后重置表单(包括pristine,dirty,model states等).对于演示,这是可以的,但它对现实世界的应用程序没有多大帮助.

想象一下,register()方法执行对服务器的调用.当我们知道服务器响应一切正常时,我们想要重置表单.将代码更新为以下内容以满足此方案的需要.

在我的template.html文件中:

<form (ngSubmit)="register(registrationForm);" #registrationForm="ngForm">
    ...
</form>

在我的component.ts文件中:

@Component({
  ...
})
export class RegistrationComponent {
  register(form: FormGroup) {

   ...

   // Somewhere within the asynchronous call resolve function
   form.reset();
  }
}

将'registrationForm'引用传递给该方法将允许我们在我们想要的执行点调用reset方法.

希望这能以任何方式帮助你.:)

注意:此方法基于Angular 2.0.0-rc.5

Answer 5

如果仅调用reset()函数,则表单控件将不会设置为pristine状态.android.io docs有一个解决这个问题的方法.

component.ts

  active = true; 

  resetForm() {
      this.form.reset();
      this.active = false;
      setTimeout(() => this.active = true, 0);
  }

component.html

<form *ngIf="active">

Answer 6

我不知道我是否走在正确的道路上,但是我使用以下表单/提交标签开始使用ng 2.4.8:

<form #heroForm="ngForm" (ngSubmit)="add(newHero); heroForm.reset()">
<!-- place your input stuff here -->
<button type="submit" class="btn btn-default" [disabled]="!heroForm.valid">Add hero</button>

似乎要做的伎俩并将表单的字段再次设置为"原始".