将formGroupDirective用于重置表单-角反应形式 [英] Usage of formGroupDirective for reset form - Angular reactive form

问题描述

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

I am trying to find best way to reset angular reactive form. I'm bit confused for reset reactive forms and not able to find which method is for template driven forms and which is reactive forms. Now I've used 'formGroupDirective' to reset but I'm getting console error like below.

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

this is how I have used formGroupDirective for reset.

模板文件:

<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有什么区别.对于反应形式，哪一种是优选的.甚至我们都可以通过

Here I couldn't understand one thing, What is the difference between FormGroupDirective and FormDirective. And which one is preferable for reactive forms. And even we can reset through formGroup name like

this.formGroup.reset();

因此，如果我们能够通过formGroup名称进行重置，那么为什么我们需要使用指令.如果有人有主意，请帮助我理解这些差异.

So If we can able to reset through formGroup name, then why we need to use directives. If any one have idea please help me to understand these differences.

推荐答案

如果您正在使用反应式表单，则应该已经为组件中的表单定义了 FormGroup .在其上使用reset.在这种情况下，没有理由使用模板引用变量.

If you are doing reactive forms, you should already have a FormGroup defined for the form in the component. Use reset on that. There is no reason to use a template reference variable in this case.

这是我的一个:

  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 .

I define the form group in the property productForm and then use that property to call reset.

我的 displayProduct 方法.它将重置表格，并使用所选产品的数据重新填充表格.

My displayProduct method is called each time the user selects a different product to edit. It resets the form and repopulates it with the data for the selected product.

此语法:

#formDirective="formGroupDirective" 

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

Is a template reference variable as indicated by the hash (#). This is often used in template-driven forms to access the form group since the form group is not defined in the code (as it is with reactive forms).

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

The FormGroupDirective in reactive forms binds the form element in the HTML to the form group defined in the component code.

我的看起来像这样:

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

注意 [formGroup] <-- FormGroupDirective

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

It is set to productForm, which is the name of my FormGroup property defined in the component code:

this.productForm = ...

这篇关于将formGroupDirective用于重置表单-角反应形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！