将formGroupDirective用于重置表单-角反应形式

时间:2019-01-30 18:21:41

标签: angular angular-reactive-forms

我正在尝试找到重置角电抗形式的最佳方法。对于重置反应式表单,我有点困惑,无法找到哪种方法用于模板驱动形式以及哪种是反应式表单。 现在,我已经使用“ formGroupDirective”进行了重置,但是出现了如下所示的控制台错误。  enter image description here

这就是我使用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名称进行重置,那么为什么需要使用指令。如果有人有主意,请帮助我理解这些差异。

2 个答案:

答案 0 :(得分: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中定义表单组,然后使用 that 属性调用reset

每次用户选择其他产品进行编辑时,都会调用我的displayProduct方法。它将重置表格,并使用所选产品的数据重新填充表格。

此语法:

#formDirective="formGroupDirective" 

是由哈希(#)表示的模板参考变量。模板驱动的表单通常使用它来访问表单组,因为表单组在代码中未定义 (与反应式表单一样)。

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

我的看起来像这样:

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

注意[formGroup] <-FormGroupDirective

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

this.productForm = ...

答案 1 :(得分:0)

如果您使用的是Reactive Forms,您可以简单地在FormGroup上使用reset()方法来清除所有表单值,并将控件再次标记为原始,如前所述。但是您也可以使用FormGroupDirective来使用resetForm(),因为这会将表单的已提交属性标记为false,而常规的reset()方法则无法做到。

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

@ViewChild(FormGroupDirective) formRef: FormGroupDirective;

然后:

this.formRef.resetForm();

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

有关更多信息:https://github.com/angular/angular/pull/10715