[英]Usage of formGroupDirective for reset form - Angular reactive form
我试图找到重置角反应形式的最佳方法。 我对重置反应形式有点困惑,无法找到哪种方法适用于模板驱动形式,哪些方法是反应形式。 现在我已经使用 '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 名称进行重置,那么为什么我们需要使用指令。 如果有人有想法,请帮助我理解这些差异。
如果您使用的是响应式表单,您可以简单地使用 FormGroup 上的 reset() 方法来清除所有表单值并将控件再次标记为原始控件,正如已经指出的那样。 但是您也可以使用 FormGroupDirective 来使用 resetForm(),因为这会将表单的提交属性标记为 false,而常规 reset() 方法不会这样做。
如果您使用 Angular Material,这尤其有用,因为默认的 ErrorStateMatcher 将检查表单是否已作为显示表单错误消息的条件之一提交。 你可以这样使用它:
@ViewChild(FormGroupDirective) formRef: FormGroupDirective;
进而:
this.formRef.resetForm();
无需在 HTML 中添加任何内容。
如果你在做响应式表单,你应该已经为组件中的表单定义了一个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
式表单中的FormGroupDirective
将 HTML 中的表单元素绑定到组件代码中定义的表单组。
我的看起来像这样:
<form novalidate
(ngSubmit)="saveProduct()"
[formGroup]="productForm">
注意[formGroup]
<-- FormGroupDirective
它被设置为productForm
,这是我在组件代码中定义的FormGroup
属性的名称:
this.productForm = ...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.