重置反应式 angular 表单的最有效方法是什么？

Question

我有Reactive Form using Angular Material个输入（mdInput），使用FormBuilder按以下方式初始化：

contactForm: FormGroup;

this.contactForm = this.fb.group({
  name: ['', [Validators.required, Validators.maxLength(128)]],
  email: ['', [Validators.required, Validators.email]],
  subject: ['', [Validators.required, Validators.maxLength(128)]],
  message: ['', [Validators.required, Validators.maxLength(1000)]]
});

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

private resetForm(): void {
  this.contactForm.reset();
}

Angular Material 输入关联到相应的 FormControl 元素并挂接到 (ngSubmit):

<form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
  <md-input-container>
    <input mdInput formControlName="name" placeholder="Name">
  </md-input-container>

  <button type="submit" md-raised-button [disabled]="contactForm.invalid">Submit</button>

在 FormGroup contactForm 上调用 reset() 时 (this.contactForm.reset(), the form elements values are successfully cleared/replaced with empty strings, but the elements are both immediately dirty and touched with CSS classesng-invalid&&ng-touchedpresent on the elements. Strangely they also have theng-pristineCSS class on them after thereset()`.

重置表单（包括 clearing/resetting 和 FormControl 值并将它们标记为未触及且未弄脏的最有效方法是什么？它是使用 markAsUntouched() 还是 markAsPristine()？它是使用 setValue() 还是 reset() 和特定选项？目标是重置表单，就好像用户是第一次与之交互一样。

更新：这是一个 Stackblitz 显示此问题的实际情况。

感谢您提供的任何帮助。

Answer 1

正如@Harry Ninh 在评论中提到的，使用常规按钮而不是 ngSubmit 将修复该行为。这是因为，默认情况下，当输入为 invalid 和 touched 或 submitted 时，会显示 Material 错误。关于它有一个很长的话题 here，但基本上，在表单控件或表单组上调用 reset() 不会重置实际表单，只会重置值。

您可以执行以下操作之一：

使用@Harry Ninh 提到的解决方法
使用 ViewChild 访问 FormGroupDirective 并重置它。

看这里：

@ViewChild(FormGroupDirective) myForm;

contactForm: FormGroup;

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

private createForm(): void {
  this.contactForm = this.fb.group({
    name: ['', [Validators.required, Validators.maxLength(128)]],
    email: ['', [Validators.required, Validators.email]],
    subject: ['', [Validators.required, Validators.maxLength(128)]],
    message: ['', [Validators.required, Validators.maxLength(1000)]]
  });
}

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

private resetForm(): void {
  if (this.myForm) {
    this.myForm.resetForm();
  }
}

重置反应式 angular 表单的最有效方法是什么？

What is the most effective way to approach resetting a reactive angular form?

angular-material2

angular

angular-reactive-forms