angularjs - Show/Hide ng-messages wrapper only when focus field is dirty -
i triying display/hide ng-messages div when field in target dirty , contain error...
i have ng-messages wrapper :
<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> my form :
<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> in case, div ng-messages container showing when field $dirty , when form(changepwd) $invalid.
i ng-messages show when focus field dirty , invalid, not when global form dirty.
for example, when start writing in inpu(o), ng-messages showing...
is there thing did wrong ?
instead of checking if form dirty can check if individual fields dirty , invalid/error. like
<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> 
Comments
Post a Comment