Angular setPristine on ngBlur

Question

• I have a form with password field for which I implemented a password directive.
• I currently implemented only 1 validation but I've a list of validations on the field.
• I want them to displayed in either red or green depending on valid/invalid respectively - when the user starts typing into the field. If the users control goes out of the box AND all validations are passed, I want to set the field to valid and set it to pristine so that the validation list won't show up.

• However if any of the validations fail, I want all of them to be seen even if the field is out of focus. Below is my snippet for the form group.

  <div class="form-group">
    <label for="inputPass" class="col-sm-3 control-label text-sm text-left">Password</label>
    <div class="col-sm-9">
      <input type="password" placeholder="Password" 
        class="form-control" ng-model="registerAccount.password" 
        required name="inputPass" id="inputPass" 
        password ng-blur="form.inputPass.$invalid ? return: form.inputPass.$setPristine">
      <div ng-show="form.inputPass.$dirty" class="help-block">
        <p class="text-danger" ng-show="form.inputPass.$error.required">
          Password is required.
        </p>
       <p ng-class="form.inputPass.$error.invalidLength ? 'text-danger' : 'text-success'">
          Password should be atleast 8 characters.
       </p>
     </div>
   </div>
  </div>
  

Following is my directive

'use strict';

angular.module('nileLeApp')
.directive('password', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function ($scope, $element, $attrs, ngModelCtrl) {
            $scope.$watch($attrs.ngModel, function (value) {

                if (value) {
                    var length = (value.length >= 8);
                    ngModelCtrl.$setValidity('invalidLength', length);
                }

            });
        }
    };
});

When the focus out of the field, the validation list is still showing up. I was expecting it to be hidden because the field is being set to pristine. Any ideas ? I wanted it to be similar to password field in https://dl.dropboxusercontent.com/u/636000/password_verification/index.html. As the user types the password, the validations are reflected in red/green.

Answer 1

You may not need to use a special directive:

<form name="testForm">
  <input ng-model="testVal" name="testVal" required ng-minlength="3" ng-maxlength="10" ng-pattern="/^\w+$/">
  <div ng-show="testForm.$invalid">
    <div ng-class="{'errors':testForm.testVal.$error.required,'success':!testForm.testVal.$error.required}">Required</div>
    <div ng-class="{'errors':testForm.testVal.$error.minlength,'success':!testForm.testVal.$error.minlength}">Minlength</div>
    <div ng-class="{'errors':testForm.testVal.$error.maxlength,'success':!testForm.testVal.$error.maxlength}">Maxlength</div>
    <div ng-class="{'errors':testForm.testVal.$error.pattern,'success':!testForm.testVal.$error.pattern}">Pattern</div>
  </div>
</form>

This code does the same thing and given you the link: dl.dropboxusercontent.com/u/636000/password_verification/index.html

If you need to establish a more sophisticated checks, you can use the following directive use-form-error:

Live example on JsFiddle

<form name="testForm">
  <input ng-model="testVal" name="testVal" required ng-minlength="3" ng-maxlength="10" ng-pattern="/^\w+$/" use-form-error="containWow" use-error-expression="testVal.indexOf('wow')>-1">
  <div ng-show="testForm.$invalid">
    <div ng-class="{'errors':testForm.testVal.$error.required,'success':!testForm.testVal.$error.required}">Required</div>
    <div ng-class="{'errors':testForm.testVal.$error.minlength,'success':!testForm.testVal.$error.minlength}">Minlength</div>
    <div ng-class="{'errors':testForm.testVal.$error.maxlength,'success':!testForm.testVal.$error.maxlength}">Maxlength</div>
    <div ng-class="{'errors':testForm.testVal.$error.pattern,'success':!testForm.testVal.$error.pattern}">Pattern</div>
    <div ng-class="{'errors':testForm.testVal.$error.containWow,'success':!testForm.testVal.$error.containWow}">It's 'wow' contains</div>
  </div>
</form>

Answer 2

You are not calling $setPristine method. Should be form.inputPass.$setPristine():

ng-blur="form.inputPass.$invalid ? return: form.inputPass.$setPristine()"

or cleaner variation:

ng-blur="form.inputPass.$valid && form.inputPass.$setPristine()"