Я пытаюсь отобразить/скрыть свой ng-message div только тогда, когда поле в мишени грязно и содержит ошибку...
У меня есть обертка ng-сообщений:
<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-сообщения показывают...
Есть ли что-то, что я сделал неправильно?
<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>
Попробуй это...
попробуй это
<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>
Вместо того, чтобы проверять, загрязнен ли форма, вы можете проверить, загрязнены ли отдельные поля и недействительны/ошибки. Что-то вроде
<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>