AngularJSの別の入力でパスワードの検証を変更するにはどうすればよいですか？

Question

私はこのような3入力があります。

<div class="form-group"> 

     <label for="username">Username</label> 
     <input type="text" 
       ng-model="formModel.username" 
       class="form-control" 
       id="username" 
       name="username" 
       required> 

       <span class="help-block" 
         ng-show="myForm.username.$error.required && myForm.username.$dirty"> 
         Required 
       </span> 

    </div> 
    <div class="form-group"> 
     <label for="password">Password</label> 
     <input type="password" 
       class="form-control" 
       id="password" 
       name="password" 
       ng-model="formModel.password" 
       required 
       valid-my-password> 

     <span class="help-block" 
       ng-show="myForm.password.$error.required && myForm.password.$dirty"> 
       Required 
     </span> 
     <span class="help-block" 
      ng-show="!myForm.password.$error.required && 
      myForm.password.$error.sameAs && myForm.password.$dirty || myForm.username.$dirty"> 
      Username and password are similar 
     </span> 

    </div> 
    <div class="form-group"> 

     <label for="password_c">Approve password</label> 
     <input type="password" 
     class="form-control" 
     id="password_c" 
     name="password_c" 
     ng-model="formModel.password_c" 
     required 
     valid-password-c /> 

     <span class="help-block" 
     ng-show="myForm.password_c.$error.required && myForm.password_c.$dirty"> 
      You need to approve the password 
     </span> 

     <span class="help-block" 
     ng-show="!myForm.password_c.$error.required && myForm.password_c.$error.noMatch && 
     myForm.password.$dirty"> 
     Passwords don't match 
     </span> 
    </div> 

をさらに検証が素晴らしい作品。しかし： 1.パスワードがユーザー名と似ていて、ユーザー名を変更しようとすると、警告が表示されません。 2.パスワードと確認パスワードの入力が完了し、検証が正常で、パスワードを変更しようとしている場合、「パスワードが一致しません」という警告は表示されません。

jsFiddle

Answer 1

の更新されたリンクです。私は "validMyUsername"と呼ばれる別のディレクティブを追加し、私はユーザー名入力から彼を呼び出します。この指令では、私はパスワードのバリデーションを変更します。 とパスワードを確認するために、私はパスワードの指示でバリデーションを変更します。

ユーザ名の入力ディレクティブ：

... 
directive('validMyUsername', function() { 

return { 
    require: 'ngModel', 
    link: function (scope, elm, attrs, ctrl) { 
     ctrl.$parsers.unshift(function (viewValue, $scope) { 
      var sameAs = viewValue != scope.myForm.password.$viewValue 

      scope.myForm.password.$setValidity('sameAs',sameAs); 
      ctrl.$setValidity('sameAs',sameAs); 

      return viewValue; 
     }) 
    } 
} 

パスワードディレクティブ：このような ここ

... 
directive('validMyPassword', function() { 

return { 
    require: 'ngModel', 
    link: function (scope, elm, attrs, ctrl) { 
     ctrl.$parsers.unshift(function (viewValue, $scope) { 
       var sameAs = viewValue != scope.myForm.username.$viewValue 
       var noMatch = viewValue != scope.myForm.password_c.$viewValue 

      scope.myForm.password_c.$setValidity('noMatch',!noMatch); 
      ctrl.$setValidity('sameAs', sameAs) 

      return viewValue; 
     }) 
    } 
} 

}）

は完全な例である：jsFiddle

Answer 2

ただ、ここで

<span class="help-block" ng-show="!myForm.password.$error.required && 
      myForm.password.$error.sameAs && myForm.password.$dirty && formModel.password==formModel.username"> 
      Username and password are similar 
     </span> 

<span class="help-block" ng-show="!myForm.password_c.$error.required && myForm.password_c.$error.noMatch && 
     myForm.password.$dirty && formModel.password_c!=formModel.password"> 
     Passwords don't match 
     </span> 

以下のスニペットを使用してエラーの検証を変更するには、私は私の答えを見つけたあなたのフィドル

http://jsfiddle.net/vz215k94/