如何在ANGULAR 2中提交表单时重置表单验证

Question

我必须重置我的表单以及验证。是否有任何方法可以将表格状态从ng-dirty重置为ng-pristine。

Answer 1

以下是目前Angular 4.1.0 - 5.1.3的工作原理：

class YourComponent {
    @ViewChild("yourForm")
    yourForm: NgForm;


    onSubmit(): void {
        doYourThing();

        // yourForm.reset(), yourForm.resetForm() don't work, but this does:
        this.yourForm.form.markAsPristine();
        this.yourForm.form.markAsUntouched();
        this.yourForm.form.updateValueAndValidity();
    }
}

Answer 2

from.resetForm（）

我已经尝试过几乎所有的东西，我发现实际上将form.submitted重置为false的唯一内容如下：

在模板中，将表单发送到提交功能：

<form name="form" class="form-horizontal" (ngSubmit)="f.form.valid && submit(f)" #f="ngForm" novalidate>

在component.ts文件中，包含以下内容：

// import NgForm
import { NgForm } from '@angular/forms';

// get the passed in variable from the html file
submit(myForm: NgForm): void {

    console.log(myForm.form.status, myForm.form.dirty, myForm.form.pristine, myForm.form.untouched, myForm.submitted, myForm.dirty, myForm.pristine, myForm.untouched);

    // This is the key!
    myForm.resetForm();

    console.log(myForm.form.status, myForm.form.dirty, myForm.form.pristine, myForm.form.untouched, myForm.submitted, myForm.dirty, myForm.pristine, myForm.untouched);


}

console.log值输出以下内容 - 请注意它会重置所有值。

VALID true false false true true false false

INVALID false true true false false true true

Answer 3

我在RC.5中这样做，我在模板中定义了表单元素。

<form (ngSubmit)="submit(); form.reset()" #form="ngForm">

传递表单以ViewChild提交或观看它根本不起作用，这对我来说已经足够了。

Answer 4

<form #formDirective="ngForm" (ngSubmit)="submitForm(formDirective)">

然后在您的组件类中，调用formDirective.resetForm（）：

private submitForm(formDirective): void {
    formDirective.resetForm();
    this.myForm.reset();
}

Answer 5

在更新的版本中（在我的情况下是Angular 2.4.8），这很简单：

将控件标记为prestine，因此再次有效。

private resetFormControlValidation(control: AbstractControl) {
    control.markAsPristine();
    control.markAsUntouched();
    control.updateValueAndValidity();
}

Answer 6

app.component.html

#formDirective="ngForm"并将formDirective传递给onSubmit方法对于重置诸如mat-error之类的错误样式至关重要。检查#4190以遵循此错误和深入的解释why it's needed and how it works under the hood。

<form [formGroup]="contactForm" (ngSubmit)="onSubmit(contactForm.value, formDirective)" #formDirective="ngForm"> 
  <!-- Your input elements... -->
  <button [disabled]="!contactForm.valid">Submit</button>
</form>

app.component.ts

请记住您需要从FormGroupDirective（角度/材质9）导入的@angular/forms。要使表单为空，请调用this.contactForm.reset();，表单将为invalid，这很好。但是，您还需要重置不需要的验证器样式，这是一种不同方法，即formDirective.resetForm();。

请注意formDirective和formData之间的差异以及其内置方法的不同。

import { FormGroupDirective } from '@angular/forms';

public contactForm: FormGroup = this.formBuilder.group({
  // Your input elements...
});

public onSubmit(
  formData: FormGroup,
  formDirective: FormGroupDirective
): void {
  this.contactForm.reset(); // Reset form data
  formDirective.resetForm(); // Reset the ugly validators
}

Answer 7

似乎还没有支持。 我看到的一种解决方法是在提交后重新创建表单，这显然很麻烦和丑陋。

另见

• https://github.com/angular/angular/issues/6196
• https://github.com/angular/angular/issues/4933
• https://github.com/angular/angular/issues/5568
• https://github.com/angular/angular/issues/4914

Answer 8

Angular 8中的此解决方案对我有效，适用于反应式表单

命名您的表单类似

<form #regForm="ngForm">

使用ViewChild创建UI表单的对象

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

在提交呼叫后使用此功能。

this.myForm.resetForm();

提交的验证为假

this.submitted = false; 

Answer 9

从Benny Bottema's answer开始，我能够使用Angular 6中的resetForm（）重置包含验证的表单。

class YourComponent {

   @ViewChild("yourForm")
   yourForm: NgForm;

    onSubmit(): void {
     doYourThing();
     this.yourForm.resetForm();
    }
}

Answer 10

我很感谢大家在这里的回答。他们向我指出了正确的方向。

角度6与角度材料

<form #myForm="ngForm" [formGroup]="formGroup" (ngSubmit)="submit()">

然后

@ViewChild('myForm') myForm: NgForm;
formGroup = new FormGroup({...});
submit() {
  if (this.formGroup.pristine ||
  this.formGroup.untouched ||
  !this.formGroup.valid
) {
    return;
  }

  .... do with form data

  this.formGroup.reset();
  this.myForm.resetForm();
}

Answer 11

Angular Reactive Forms

onCancel(): void {
    this.registrationForm.reset();
    this.registrationForm.controls['name'].setErrors(null);
    this.registrationForm.controls['email'].setErrors(null);
  }

Answer 12

在最新的Angular版本中，您只需要运行this.form.reset()（将所有内容标记为原始且未修改，并且将所有内容隐藏在中），然后运行update value and validity for all the child form controls/groups/arrays。 / p>

不幸的是，至少在目前，没有手动遍历子控件的嵌套控件还没有直接方法。

Answer 13

在使用YourformName.reset()进行重置时，我遇到了验证错误问题。 因此，请在您的.ts文件中使用YourformName.resetForm()。现在它可以正常工作。

我在Angular btw中使用模板驱动形式。

Answer 14

如果您使用的是Angular Material并使用export enum PostType { RECOMMEND, COMMUNITY } ，那么它对我有用的唯一方法就是这样。 您必须使用FormGroupDirective。

<mat-error>

Answer 15

这在Angular 5中对我有用

.container {
  height: 28px;
  vertical-align: bottom;
}

这将重置表单值和验证。

Answer 16

我最近认为这是因为目前（2016年5月）目前还没有为Angular2构建任何内容。

考虑到用户无法输入未定义的＆＃39;或者＆＃39; null＆＃39;验证主要用于向用户显示表单错误，然后将控制值重置为Null

myControl.updateValue(null);

在决定仅通过添加

在UI中显示控件错误时，您需要添加此条件

if (myControl.value !== undefined && myControl.value !== null) {
   //then there is reason to display an error
}

（此检查因为Validators.Required将空白内容视为有效）

希望这有帮助。

Answer 17

如果您使用模型驱动的表单，即ngFormModel，在提交后再次定义controlGroup将解决此问题。请参阅link

Answer 18

Angular 8表单重置验证错误

创建表单：

 this.userForm = this.formBuilder.group({
  firstName: ['', [Validators.required, Validators.minLength(2)]],
  email: ['', [Validators.required, Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')]]});

重置表格：

this.userForm.reset();
this.userForm.controls.userEmail.setErrors(null);