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

Question

我的组件中有一个反应形式，我想将每个输入的 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？

Answer 1

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

this.addressForm.markAsTouched()

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

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

Answer 2

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