Показать / скрыть оболочку ng-messages, только если поле фокуса грязное

Я пытаюсь отобразить/скрыть свой div ng-messages только тогда, когда поле в target грязное и содержит ошибку...

У меня есть эта оболочка 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, а форма (changePwd) — $invalid.

Я хотел бы, чтобы ng-сообщения отображались только тогда, когда поле фокуса грязное и недействительное, а не когда глобальная форма грязная.

Например, когда я начинаю писать что-то в inpu(o), ng-сообщения показывают...

ng-сообщения показываются, когда не должны

Есть ли что-то, что я сделал неправильно?


validation forms angularjs angularjs-ng-form ng-messages
person Kévin Vilela Pinto    schedule 25.08.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вместо того, чтобы проверять, загрязнена ли форма, вы можете проверить, являются ли отдельные поля грязными и недействительными/ошибками. Что-то типа

<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>
person Bharat    schedule 25.08.2015

arrow_upward
0
arrow_downward

попробуй это

    <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>
person Vesper    schedule 23.02.2016