我正在尝试找到重置角电抗形式的最佳方法。对于重置反应式表单,我有点困惑,无法找到哪种方法用于模板驱动形式以及哪种是反应式表单。 现在,我已经使用“ 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名称进行重置,那么为什么需要使用指令。如果有人有主意,请帮助我理解这些差异。
答案 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中添加任何内容。