Javascript 仅当$touch为true时显示的消息

我没有做什么特别的事

我有一个输入，我希望每一个关键的中风验证。如果验证失败，则显示错误。不要等待模糊事件触发$touched

我以为这是默认情况，但显然不是。我使用的是有角度的材料和有角度的信息。我这样做是为了capslock检测

标记：

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

因此，这看起来像预期的那样工作，但实际上，只有在特定输入触发模糊事件后，才会显示错误消息。。所以我可以用capslock，输入10个字符，error对象说capslock错误在那里，但是因为$touch不是真的，所以它不会显示

一旦$touch设置为true，那么我就可以返回到输入中，一切都按照预期进行

有什么想法吗？提前谢谢

变化

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

到

你也可以试试

<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" md-auto-hide='false'></div>

---

请逐个尝试以上操作，找出符合您情况的选项。

在Angle Material 1.0之前的版本中（即使用

ng show=“primaryLogin.login.$invalid&&primaryLogin.login.$touch”

。这为我提供了解决方法。

使用md是错误的 例如：

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

---

什么是

capslock

属性？@tasseKATT capslock属性是一个用于capslock检测的自定义指令。它有自己的错误状态来显示消息。注意：通常当您想强制人们使用小写时，您只需强制使用小写而不是验证。请参见谢谢先生。添加

ng show=“primaryLogin.login.$dirty"

成功了。我认为ng消息处理了它自己的ng show。你能解释一下为什么这样做吗？@TyMayn ng messages会在页面加载后立即显示错误消息。但是你可能不想看到它。你可能想控制何时显示这些错误消息。$dirty意味着用户已经与该元素进行了交互。因此输入类型文本，这意味着用户输入了一些文本（即使捕获到一个字符）。这不是模糊的，所以用户仍然可以将光标放在文本框中，并继续输入一些内容，所有这些内容都将被$dirty捕获。$touch是用户单击某个控件但没有释放它就离开的地方。$pristine是用户没有单击/模糊某个控件的地方。这很好，但没有任何帮助。请选中此项：。即使您添加了md au若要隐藏，则在页面加载时不会显示电子邮件消息。这是最好的ng show或ng if搞乱了ng消息动画。而不是仅为md设置为true is error message如果我们将条件设置为md is error，它将作为一个符咒工作。谢谢。

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

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

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