仅在焦点字段脏时显示/隐藏 ng-messages 包装器答案

【问题标题】：Show/Hide ng-messages wrapper only when focus field is dirty仅在焦点字段脏时显示/隐藏 ng-messages 包装器
【发布时间】：2015-08-25 09:51:27
【问题描述】：

仅当目标中的字段脏并且包含错误时，我才尝试显示/隐藏我的 ng-messages div...

我有这个 ng-messages 包装器：

<div class="alert-bloc red clearfix" data-icon="warning-white" ng-if="changePwd.$dirty" ng-hide="hideMe" ng-messages="changePwd.$invalid" ng-messages-multiple>
    <div>
        <p ng-message="required">Votre nouveau mot de passe est requis</p>
        <p ng-message="minlength">Votre nouveau mot de passe est trop court</p>
        <p ng-message="pattern">Votre nouveau mot de passe doit intégrer au moins une majuscule, une minuscule et un chiffre</p>
        <p ng-message="different">{{ errorMsg }}</p>
        <p ng-message="mirror">{{ errorMsg }}</p>
    </div>
</div>

我的表格是：

<form role="form" name="changePwd" novalidate autocomplete="off">
    <div>
        <label>Votre ancien mot de passe :
            <input type="password" name="o" ng-model="credentials.o" ng-change="controleChangePassword(credentials);" required onpaste="return false;"/>
        </label>
    </div>
    <div ng-show="changePwd.o.$dirty">
        <label >Votre nouveau mot de passe :
            <input type="password" name="p1" ng-model="credentials.p1" ng-change="controleChangePassword(credentials);" ng-minlength="8" ng-pattern="/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$/" required onpaste="return false;"/>
        </label>

        <label>Confirmez votre nouveau mot de passe :
            <div>
                <input type="password" name="p2" ng-model="credentials.p2" ng-change="controleChangePassword(credentials);" required onpaste="return false;" />
            </div>
        </label>
    </div>

    <button type="button" ng-disabled="changePwd.$invalid || disabled" ng-click="updatePassword(credentials);">Valider</button>
</form>

在我的例子中，div ng-messages 容器显示任何字段何时为 $dirty 以及何时 form(changePwd) 为 $invalid。

我希望 ng-messages 仅在焦点字段脏且无效时显示，而不是在全局表单脏时显示。

例如，当我开始在 inpu(o) 中写一些东西时，ng-messages 显示...

是不是我做错了什么？

【问题讨论】：

标签： angularjs forms validation angularjs-ng-form ng-messages

【解决方案1】：

您可以检查各个字段是否脏且无效/错误，而不是检查表单是否脏。类似的东西

<div class="alert-bloc red clearfix" data-icon="warning-white" ng-hide="hideMe" ng-messages="(changePwd.o.$dirty && chagePwd.o.$error) || (changePwd.p1.$dirty && chagePwd.p1.$error) || (changePwd.p2.$dirty && chagePwd.p2.$error)" ng-messages-multiple>
  <div>
    <p ng-message="required">Votre nouveau mot de passe est requis</p>
    <p ng-message="minlength">Votre nouveau mot de passe est trop court</p>
    <p ng-message="pattern">Votre nouveau mot de passe doit intégrer au moins une majuscule, une minuscule et un chiffre</p>
    <p ng-message="different">{{ errorMsg }}</p>
    <p ng-message="mirror">{{ errorMsg }}</p>
  </div>
</div>

【讨论】：

【解决方案2】：

试试这个

    <md-input-container class="md-block">
                <label>Client Name</label>
                <input required name="clientName" ng-model="project.clientName">
                <div ng-messages="projectForm.clientName.$error" ng-if="projectForm.clientName.$touched">
                  <div ng-style="projectForm.clientName.$error.required ? { 'display ' : 'block' } : {'display' : 'none'} " ng-message="required">This is required.</div>
                </div>
     </md-input-container>

【讨论】：

【解决方案3】：

<div class="login">
<h1>Login to Web App</h1>

<form name="loginForm">
    <p ng-bind="msg"></p>

    <p>
        <input name="username" type="email" ng-model="obj.username" ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/"
               required>
    </p>

    <div ng-messages="loginForm.username.$dirty && loginForm.username.$error">
        <div ng-message="required">You forgot to enter your email address...</div>
        <span ng-message="pattern">Please enter a valid email address!</span>
    </div>
    <p><input type="password" ng-model="loginForm.password" name="password" value="" placeholder="Password"
              required></p>

    <div ng-messages="loginForm.password.$dirty && loginForm.password.$error">
        <p ng-message="required">Required!</p>
    </div>


    <p class="submit"><input ng-click="signIn()" ng-disabled="!loginForm.$valid" type="submit" name="commit"
                             value="Login"></p>
</form>

试试这个...

【讨论】：