使用 formGroupDirective 重置表单 - Angular 反应表单 [英] 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.使用重置.在这种情况下没有理由使用模板引用变量.

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

Notice the [formGroup] <-- The FormGroupDirective

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

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

this.productForm = ...

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