angular ng-messages 仅在 $touched 为真时显示 [英] angular ng-messages only showing when $touched is true

问题描述

我没有做任何特别的事情.

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

我认为这是默认情况，但显然不是.我正在使用角度材料和角度信息.我这样做是为了检测大写锁定.

标记:

<md-content layout-padding layout="column"><md-input-container flex><label>登录 ID</label><input type="text" required="" name="login" ng-model="primary.loginID" capslock><div ng-messages="primaryLogin.$error"><div ng-message="需要">请输入登录 ID.

<div ng-message="capslock">Caps Lock 已开启！

<pre>{{ primaryLogin |json }}</pre></md-input-container></md-content></表单>

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

<代码>{$错误":{大写锁定": [{"$viewValue": "Q","$validators": {},"$asyncValidators": {},$解析器":[空值],$格式化程序":[空值，空值],"$viewChangeListeners": [],$untouched":假，$touched":真的，"$pristine": 假,$dirty":真的，$valid":假，$无效":真，$错误":{大写锁定":真},"$name": "登录",$ 选项":{去抖动":100，updateOnDefault":true}}]},"$name": "primaryLogin",$dirty":真的，"$pristine": 假,$valid":假，$无效":真，$提交":假，登录": {"$viewValue": "Q","$validators": {},"$asyncValidators": {},$解析器":[空值],$格式化程序":[空值，空值],"$viewChangeListeners": [],$untouched":真的，$touched":假，"$pristine": 假,$dirty":真的，$valid":假，$无效":真，$错误":{大写锁定":真},"$name": "登录",$ 选项":{去抖动":100，updateOnDefault":true}}}

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

一旦 $touched 设置为 true，我就可以返回输入，一切都按预期进行.

有什么想法吗?提前致谢！

解决方案

更改

到

你也可以试试

或

您也可以像这样对它们进行有条件的 AND 检查:

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

或用于条件 OR 检查:

以上一一尝试，找出符合您情况的任何一种.

I am not doing anything too special.

I have an input I want validated with every key stroke. If validation fails, display the error. Do not wait for the blur event to trigger the $touched.

I thought this was the default case, but apparently it is not. I am using angular materials along with angular messages. I am doing this for capslock detection.

The markup:

<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>

When I first come to the page, turn caps lock on, and start typing, my error message looks like so:

{
  "$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
    }
  }
}

So this seems to be working as expected, but the actually error message doesn't display until the blur event fires on that particular input.. So I can go in with capslock, type 10 characters, the error object says the capslock error is there, but since $touched isn't true, then it doesn't show.

Once $touched is set to true, then I can go back into the input and everything works like expected.

Any ideas? Thanks in advance!

解决方案

Change

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

to

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

You may also try

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

OR

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

You can also club them like so for conditional AND check:

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

or for conditional OR check:

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

Try the above one by one to find out whichever one meets your case.

这篇关于angular ng-messages 仅在 $touched 为真时显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！