Validating Password And Confirm Password Fields Whenever One Or The Other Fields Model Changes (Each Keystroke) With Angular Directive
<p>I currently have an Angular Directive that validates a password and confirm password field as matching. It works to a point, it does throw an error when the passwords do not match. However, it doesn't throw the error until you have entered data in both fields. How can I make it so the error for mismatched passwords is thrown as soon as you enter data in one field or the other?</p>

<p>Here is the directive (it has to be added to both fields that need to match):</p>

<pre><code>.directive('passwordVerify', function() {
   return {
      restrict: 'A', // only activate on element attribute
      require: '?ngModel', // get a hold of NgModelController
      link: function(scope, elem, attrs, ngModel) {
         //if (!ngModel) return; // do nothing if no ng-model

         // watch own value and re-validate on change
         scope.$watch(attrs.ngModel, function() {
            validate();
         });

         // observe the other value and re-validate on change
         attrs.$observe('passwordVerify', function(val) {
            validate();
         });

         var validate = function() {
            // values
            var val1 = ngModel.$viewValue;
            var val2 = attrs.passwordVerify;

           // set validity
           ngModel.$setValidity('passwordVerify', !val1 || !val2 || val1 === val2);
        };
      }
   };
});
</code></pre>

<p>And here is the directive in my form:</p>

<pre><code>&lt;div class="small-5 columns"&gt;
    &lt;div class="small-12 columns"&gt;
        &lt;label&gt;
            Password
            &lt;input 
                ng-class="{ notvalid: submitted &amp;&amp; add_user_form.user_password.$invalid }" 
                class="instructor-input" 
                id="user_password" 
                type="password" 
                name='user_password' 
                placeholder="password" 
                value='' 
                required 
                ng-model="user.user_password" 
                password-verify="[[user.confirm_password]]"
            &gt;
        &lt;/label&gt;
        &lt;p class="help-text"&gt;
            &lt;span class="   "&gt;Required&lt;/span&gt;
        &lt;/p&gt;
        &lt;div 
            class="help-block" 
            ng-messages="add_user_form.user_password.$error" 
            ng-show="add_user_form.user_password.$touched || add_user_form.user_password.$dirty"
        &gt;
        &lt;span class="red"&gt;
            &lt;div ng-messages-include="/app/views/messages.html" &gt;&lt;/div&gt;
        &lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="small-12 columns"&gt;
    &lt;label&gt;
        Confirm Password
        &lt;input 
            ng-class="{ notvalid: submitted &amp;&amp; add_user_form.confirm_password.$invalid }" 
            class="instructor-input" 
            id="confirm_password" 
            ng-model="user.confirm_password" 
            name="confirm_password" 
            type="password" 
            placeholder="confirm password" 
            name="user_confirm_passsword" 
            required 
            password-verify="[[user.user_password]]"
        &gt;
    &lt;/label&gt;
    &lt;p class="help-text"&gt;
        &lt;span class="   "&gt;
            Enter matching password
        &lt;/span&gt;
    &lt;/p&gt;
    &lt;div 
        class="help-block" 
        ng-messages="add_user_form.confirm_password.$error" 
        ng-show="add_user_form.confirm_password.$dirty || add_user_form.confirm_password.$touched "
    &gt;
        &lt;span class="red"&gt;
            &lt;div 
                ng-messages-include="/app/views/messages.html"
            &gt;&lt;/div&gt;
        &lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>