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

问题描述：

我的组件中有一个响应式表单，我想在每个输入上设置 touched 属性等于 true.我当前的代码执行此操作，但会引发错误 Cannot set property touch of #它只有一个 getter:

I have a reactive form in my component and I want to set the touched property on every one of the inputs equal to true. My current code does this, but it throws the error 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?

How can I set the touched value of every input to true?

答

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

There's a pretty straightforward method to do this: markAsTouched. It should be enough to use it on the form group.

this.addressForm.markAsTouched()

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

In case you want for some reason to mark all controls manually, they itself have this method available.

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

markAsTouched is a method of the AbstractControl all form elements inherit from. Out of curiosity, you might want to visit the @angular/forms/src/model.d.ts declaration file to find some more interesting methods of the form objects. Or just visit the documentation.

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

相关推荐