14

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

我有一个输入，我想在每次击键时都进行验证。如果验证失败，则显示错误。不要等待 blur 事件触发 $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 不正确，因此它不会显示。

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

有任何想法吗？提前致谢！

4

4 回答 4

21

改变

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

到

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

你也可以试试

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

或者

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

您也可以像这样对它们进行俱乐部检查以进行有条件的检查：

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

或用于条件或检查：

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

逐一尝试以上方法，找出符合您情况的哪一种。

于 2016-01-21T08:36:40.400 回答
4

在 Angular Material 的 Pre 1.0 版本（即 <= v0.11.4）中，情况就是这样：默认显示 ng-message。

但是，材料设计规范指出：

仅在用户与字段交互后显示错误文本。如果用户输入了不正确的数据，帮助文本可能会转换为错误文本。

如果你想在用户交互之前显示消息，你可以在你的 ng-messages 指令中添加“md-auto-hide='false'”。

<div ng-messages="primaryLogin.$error" md-auto-hide='false'></div>

我从以下位置找到了这个解决方案：这里

于 2016-01-25T23:38:08.187 回答
1

检查与ng-show="primaryLogin.login.$invalid && primaryLogin.login.$touched"。这对我有用。

于 2016-12-19T10:30:00.653 回答
1

使用 md-is-error 示例：

<md-input-container md-is-error="true">

“当给定的表达式计算为真时，输入容器将进入错误状态。如果输入已被触摸且无效，则默认为错误。”

https://material.angularjs.org/1.1.3/api/directive/mdInputContainer

于 2017-04-06T13:23:21.780 回答