角度 ng-messages 仅在 $touched 为 true 时显示

2024-05-04

我并没有做任何太特别的事情。

我有一个输入,需要在每次击键时进行验证。如果验证失败,则显示错误。不要等待模糊事件来触发$touched。

我以为这是默认情况,但显然不是。我正在使用有角度的材料和有角度的消息。我这样做是为了大写锁定检测。

标记:

<form name="primaryLogin" novalidate>
    <md-content layout-padding layout="column">
        <md-input-container flex>
            <label>Login ID</label>
            <input type="text" required="" name="login" ng-model="primary.loginID" capslock>

            <div ng-messages="primaryLogin.$error">
                <div ng-message="required">
                    Please enter a Login ID.
                </div>

                <div ng-message="capslock">
                    Caps Lock is ON!
                </div>
            </div>

            <pre>{{ primaryLogin | json }}</pre>

        </md-input-container>

    </md-content>
</form>

当我第一次进入该页面,打开大写锁定并开始输入时,我的错误消息如下所示:

{
  "$error": {
    "capslock": [
      {
        "$viewValue": "Q",
        "$validators": {},
        "$asyncValidators": {},
        "$parsers": [
          null
        ],
        "$formatters": [
          null,
          null
        ],
        "$viewChangeListeners": [],
        "$untouched": false,
        "$touched": true,
        "$pristine": false,
        "$dirty": true,
        "$valid": false,
        "$invalid": true,
        "$error": {
          "capslock": true
        },
        "$name": "login",
        "$options": {
          "debounce": 100,
          "updateOnDefault": true
        }
      }
    ]
  },
  "$name": "primaryLogin",
  "$dirty": true,
  "$pristine": false,
  "$valid": false,
  "$invalid": true,
  "$submitted": false,
  "login": {
    "$viewValue": "Q",
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [
      null
    ],
    "$formatters": [
      null,
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": false,
    "$dirty": true,
    "$valid": false,
    "$invalid": true,
    "$error": {
      "capslock": true
    },
    "$name": "login",
    "$options": {
      "debounce": 100,
      "updateOnDefault": true
    }
  }
}

所以这似乎按预期工作,但实际错误消息直到模糊事件在该特定输入上触发后才会显示。所以我可以使用大写锁定,输入 10 个字符,错误对象表示存在大写锁定错误,但由于 $touched 不是 true,所以它不会显示。

一旦 $touched 设置为 true,我就可以返回输入,一切都按预期工作。

有任何想法吗?提前致谢!


Change

<div ng-messages="primaryLogin.$error">

to

<div ng-messages="primaryLogin.$error" ng-show="primaryLogin.login.$dirty">

您也可以尝试

<div ng-messages="primaryLogin.$error" ng-show="primaryLogin.login.$touched">

OR

<div ng-messages="primaryLogin.$error" ng-show="primaryLogin.login.$pristine">

您还可以像这样将它们组合起来进行条件 AND 检查:

<div ng-messages="primaryLogin.$error" ng-show="primaryLogin.login.$dirty && primaryLogin.login.$touched && primaryLogin.login.$pristine"> 

或用于条件 OR 检查:

<div ng-messages="primaryLogin.$error" ng-show="primaryLogin.login.$dirty || primaryLogin.login.$touched || primaryLogin.login.$pristine">

请一一尝试以上方法,看看哪一种适合您的情况。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

角度 ng-messages 仅在 $touched 为 true 时显示 的相关文章