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().

posted on 2017-02-17 18:44  码先生  阅读(1147)  评论(0编辑  收藏  举报