如何重置表单的验证状态?
表单的使用是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().