zoukankan      html  css  js  c++  java
  • 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().

  • 相关阅读:
    go-web摘抄1-基础知识
    arduino3-机械臂
    Arduino-2 使用按键开关
    Arduino-1 点亮小灯
    树莓派的语音识别
    gitlab的环境搭建及使用
    python数据处理 2
    idea 无法创建class文件
    Intellij IDEA添加database无法显示表等问题
    Intell idea 添加 jd反编译插件
  • 原文地址:https://www.cnblogs.com/noper/p/6411169.html
Copyright © 2011-2022 走看看