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

＆gt; = RC.6

支持重置表单并维持submitted状态。

console.log(this.form.submitted);

this.form.reset()

或

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

<强>更新

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

<form *ngIf="showForm"

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

Plunker example

原始＆lt; = RC.5 只需将创建表单的代码移动到方法并在处理submit后再次调用它：

@Component({
  selector: 'form-component',
  template: `
    <form (ngSubmit)="onSubmit($event)" [ngFormModel]="form">
       <input type="test" ngControl="name">
       <input type="test" ngControl="email">
       <input type="test" ngControl="username">
       <button type="submit">submit</button>
    </form>
    <div>name: {{name.value}}</div>
    <div>email: {{email.value}}</div>
    <div>username: {{username.value}}</div>
`
})
class FormComponent {

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

  form:ControlGroup;

  constructor(private builder:FormBuilder) {
    this.createForm();
  }

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

    this.form = this.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() {
    this.createForm();
  }
}

Plunker example

Answer 2

使用NgForm的{{1}}而不是.resetForm()，因为这是.reset()的公共API中正式记录的方法。（参考[1]）

NgForm

<form (ngSubmit)="mySubmitHandler(); myNgForm.resetForm()" #myNgForm="ngForm">方法会重置.resetForm()的{{1}}并将其NgForm标记设为FormGroup（参见[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基础指南，并点击重置表格部分时，当我阅读以下关于他们提供的解决方案时，我非常惊讶。

这是一个临时的解决方法，我们等待正确的表单重置功能。</ p>

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

根据FormGroup API（标记为稳定），已经有一个＆＃39;重置＆＃39;方法

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

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

请注意，在表单元素中，我已初始化了模板引用变量＆registration;注册表格＆＃39;并将其初始化为ngForm Directive，其中＆＃34;管理整个表格＆＃34;。这使我可以访问管理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();
  }
}

传递＆＃39; registrationForm＆＃39;对该方法的引用将允许我们在我们想要的执行点调用reset方法。

希望这能以任何方式帮助你。：）

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

Answer 5

如果仅调用reset()函数，则表单控件将不会设置为原始状态。 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：

{{1}}

似乎要做的伎俩并将表单的字段再次设置为“pristine”。

Answer 7

我在类似的情况下使用了GünterZöchbauer的答案，这对我来说非常完美，将表单创建移动到函数并从ngOnInit（）调用它。

为了说明，我就是这样做的，包括字段初始化：

ngOnInit() {
    // initializing the form model here
    this.createForm();
}

createForm() {
    let EMAIL_REGEXP = /^[^@]+@([^@\.]+\.)+[^@\.]+$/i; // here just to add something more, useful too

    this.userForm = new FormGroup({
        name: new FormControl('', [Validators.required, Validators.minLength(3)]),
        city: new FormControl(''),
        email: new FormControl(null, Validators.pattern(EMAIL_REGEXP))
    });

    this.initializeFormValues();
}

initializeFormValues() {
    const people = {
        name: '',
        city: 'Rio de Janeiro',  // Only for demonstration
        email: ''
    };
    (<FormGroup>this.userForm).setValue(people, { onlySelf: true });
}

resetForm() {
    this.createForm();
    this.submitted = false;
}

我在表单中添加了一个按钮，用于智能重置（字段初始化）：

在HTML文件（或内联模板）中：

<button type="button" [disabled]="userForm.pristine" (click)="resetForm()">Reset</button>

首次加载表单或单击重置按钮后，我们具有以下状态：

FORM pristine: true 
FORM valid: false (because I have required a field) 
FORM submitted: false
Name pristine: true
City pristine: true
Email pristine: true

简单的form.reset（）所有字段初始化都不适合我们！： - ）

Answer 8

我在角度4中使用反应形式，这种方法对我有用：

    this.profileEditForm.reset(this.profileEditForm.value);

请参阅基础知识文档中的reset the form flags

Answer 9

请使用以下格式，它对我来说非常适合..我已经检查了很多方法，但这很有效。<form (ngSubmit)="mySubmitHandler(); myNgForm.resetForm()" #myNgForm="ngForm"> .... </form>

Answer 10

如果有人想要清除只能使用的特定表格控件

handleChange = (e, type) => {
    let formValues = this.state.formValues;
    let value = this.fetchValue(e, type);
    formValues[e.target.name] = formValues[e.target.name] || [];
    formValues[e.target.name] = [...formValues[e.target.name], value];
    this.setState({formValues: formValues});
    console.log(this.state.formValues);
  }

Answer 11

现在NgForm支持两种方法： .reset（）和.resetForm（），后者还将表单的提交状态更改为错误的还原表单，并将其控件更改为初始状态。

Answer 12

form: NgForm;

form.reset()

这对我不起作用。它清除了这些值，但控件引发了错误。

但是对我有用的是创建一个隐藏的重置按钮，然后在我们想要清除表单时单击该按钮。

<button class="d-none" type="reset" #btnReset>Reset</button>

然后在组件上定义ViewChild并在代码中引用它。

@ViewChild('btnReset') btnReset: ElementRef<HTMLElement>;

使用此重置表单。

this.btnReset.nativeElement.click();

请注意，类d-none在按钮上设置了display: none;。

提交后在Angular 2中重置表单

12 个答案: