Angular2基础03：如何重置表单的验证状态？

如何重置表单的验证状态？

表单的使用是Web应用的核心，掌握表单的实时状态尤其重要，它们包括：

1. 用户碰过此控件吗？

2. 它的值变化了吗？

3. 数据变得无效了吗？

上述功能在angular2中通常使用 NgModel + 模板引用变量来搭配使用完成。

根据上述状态，良好的显示隐藏错误信息／交互效果，能够带给用户好的体验。

这里需要注意的是上述3个状态的变化理解：

有效性：

只要满足验证条件即为ng-valid，否侧ng-invalid

是否被访问过：

当鼠标focus该input(未移出时未ug-untouched),移出之后马上变为ng-touched(不管数据有无变化)

当改变它Model层值时，也会变为ng-touched。

控件值有无发生变化：

当鼠标focus在该input上，并且输入时，马上由ng-pristine 变为 ng-dirty（实时变化）

但是改变它Model层值时，ng-pristine并不会改变，这一点与 "是否被访问有所区别"

需要记住的是：当用户更改数据后，为了让form组件保持为pristine，用户应该在点击按钮后，调用(#myForm="ngForm")myForm.reset().

转载于:https://www.cnblogs.com/noper/p/6411169.html