Angular2 - 如何将表单上的“touched”属性设置为true

Posted 2023-03-13

【中文标题】Angular2 - 如何将表单上的“touched”属性设置为true

【英文标题】：Angular2 - How to set `touched` property on form to true

【发布时间】：2017-07-12 23:21:04

【问题描述】：

我的组件中有一个响应式表单，我想将每个输入上的touched 属性设置为等于true。我当前的代码会这样做，但会引发错误Cannot set property touched of #<AbstractControl> which has only a getter:

addressForm: FormGroup;

...

this.addressForm = this._fb.group(
    street: ["", [<any>Validators.required]],
    city: ["", [<any>Validators.required]],
    state: ["", [<any>Validators.required]],
    zipCode: ["", [<any>Validators.required]],
    country: ["", [<any>Validators.required]]
);

...

for (var key in this.addressForm.controls) 
    this.addressForm.controls[key].touched = true;

如何将每个输入的touched 值设置为true？

【问题讨论】：

Touched 和 Untouched 是只读属性。不能赋值。

顺便说一句，如果您在 html 表单元素上使用 #myForm="ngForm" ，您可以在 HTML 中访问 myForm.submitted，因此可能不需要打扰 .touched

@RonNewcomb 您应该将此添加为答案。它为我节省了一些精力

this.addressForm.controls[key].markAsTouched()

form.control.markAllAsTouched()

【参考方案1】：

有一个非常简单的方法可以做到这一点：markAsTouched。在表单组上使用它应该足够了。

this.addressForm.markAsTouched()

如果您出于某种原因想要手动标记所有控件，它们本身就有此方法可用。

markAsTouched是AbstractControl所有表单元素继承自的方法。出于好奇，您可能想访问@angular/forms/src/model.d.ts 声明文件以查找表单对象的一些更有趣的方法。或者直接访问documentation。

【讨论】：

this.addressForm.form.markAsTouched()

【参考方案2】：

如果您在 HTML 表单元素上使用 #myForm="ngForm"，则可以在 HTML 中访问 myForm.submitted，因此可能不需要使用 .touched