Angular2:如何在代码中更改NgModel的原始状态?

时间:2016-12-07 10:10:35

标签: validation angular typescript

当您更改NgModel的字段时,它会自动将model.prisitne更改为true。

当你提交表格时,它不会改变“原始”,毫无疑问,这不是一个错误。

但在我的情况下,当“pristine”为真时我显示错误,当我提交表单时,我需要显示验证错误,我认为当您提交表单时,我们可以说这个表单中的字段触及,因为您无法提交无效表格。但是在Angular2中它以不同的方式工作。

那么,在代码/组件中是否可以说触摸表单控件/字段(pristine = true)?

let email:AbstractControl = this.frm.form.controls['email'];

设置电子邮件“prisitne”为真。

3 个答案:

答案 0 :(得分:8)

email.markAsPristine();
email.markAsTouched();
email.reset();

this.frm.reset();

另见https://angular.io/docs/ts/latest/api/forms/index/AbstractControl-class.html

您可以使用此较短的方法来获取控件

let email:AbstractControl = this.frm.get('email']);

答案 1 :(得分:4)

每个表单控件都附加了不同的状态。

您可以通过以下代码检查任何状态,

this.frm.form.controls['email'].pristine;
this.frm.form.controls['email'].touched;

供参考。看看这个plunker并点击按钮。

https://plnkr.co/edit/mJFftirG3ATDpnJRWmKN?p=preview

答案 2 :(得分:2)

从Angular v4.4.5开始

node_modules/web3/index.d.ts 删除控制原始状态

markAsDirty() 将控件设置为原始状态