formGroupDirective 用于重置表单 - Angular 反应式表单

Posted 2023-03-13

【中文标题】formGroupDirective 用于重置表单 - Angular 反应式表单

【英文标题】：Usage of formGroupDirective for reset form - Angular reactive form

【发布时间】：2019-06-24 02:49:52

【问题描述】：

我正在尝试找到重置角度反应形式的最佳方法。我对重置反应式表单有点困惑，无法找到哪种方法适用于模板驱动的表单，哪种是反应式表单。 现在我使用“formGroupDirective”进行重置，但出现如下控制台错误。

这就是我使用 formGroupDirective 进行重置的方式。

模板文件：

<form 
  ...
  #formDirective="formGroupDirective" 
>

TS 文件：

import  ViewChild, ...  from '@angular/core';
import  FormGroupDirective, ...  from '@angular/forms';

export class MyComponent 
 ...
 @ViewChild('formGroupDirective') private formGroupDirective: FormGroupDirective;

  constructor(... )

  private someFunction(): void  
    ...
    formGroupDirective.resetForm();
  

这里我不明白一件事，FormGroupDirective 和 FormDirective 有什么区别。哪一种更适合反应形式。 甚至我们可以通过像

这样的 formGroup 名称来重置

this.formGroup.reset();

所以如果我们可以通过formGroup名称进行重置，那么为什么我们需要使用指令。如果有人有想法，请帮助我理解这些差异。

【参考方案1】：

如果您使用的是响应式表单，您可以简单地使用 FormGroup 上的 reset() 方法来清除所有表单值并将控件再次标记为原始控件，正如已经指出的那样。但是您也可以使用 FormGroupDirective 来使用 resetForm()，因为这会将表单的提交属性标记为 false，而常规的 reset() 方法不会这样做。

如果您使用 Angular Material，这将特别有用，因为默认的 ErrorStateMatcher 将检查表单是否已提交，作为显示表单错误消息的条件之一。你可以这样使用它：

@ViewChild(FormGroupDirective) formRef: FormGroupDirective;

然后：

this.formRef.resetForm();

无需在 html 中添加任何内容。

欲了解更多信息：https://github.com/angular/angular/pull/10715

【讨论】：

为我工作。我喜欢它，因为它很小。

为一个表单工作，但不能在一个组件中使用两个表单。每次它只重置第一个表单。

【参考方案2】：

如果您正在使用响应式表单，您应该已经为组件中的表单定义了FormGroup。使用重置。在这种情况下没有理由使用模板引用变量。

这是我的一个：

  ngOnInit(): void 
    this.productForm = this.fb.group(
      productName: ['', [Validators.required,
                         Validators.minLength(3),
                         Validators.maxLength(50)]],
      productCode: ['', Validators.required],
      tags: this.fb.array([]),
      description: ''
    );
  

  displayProduct(product: Product): void 
    if (this.productForm) 
      this.productForm.reset();
    
    // ...
  

我在属性productForm中定义了表单组，然后使用那个属性调用reset。

每次用户选择要编辑的不同产品时，都会调用我的displayProduct 方法。它会重置表单并使用所选产品的数据重新填充它。

这个语法：

#formDirective="formGroupDirective" 

是一个模板引用变量，由井号 (#) 指示。这通常在模板驱动的表单中用于访问表单组，因为表单组没有在代码中定义（与反应式表单一样）。

反应式表单中的 FormGroupDirective 将 HTML 中的表单元素绑定到组件代码中定义的表单组。

我的看起来像这样：

<form novalidate
      (ngSubmit)="saveProduct()"
      [formGroup]="productForm">

注意[formGroup] FormGroupDirective

设置为productForm，这是我在组件代码中定义的FormGroup属性的名称：

this.productForm = ...

【讨论】：

在反应形式中， this.productFrom.reset() 它不会将反应形式重置为原始状态权..

是的，它会重置表单和控件状态属性：原始、有效、脏等。它不会清除或重置表单值 ...只是状态属性。它不适合你吗？

它确实重置了表单及其值，但之后的形式是 touched 和 invalid