angularjsのディレクティブ実現の中で2つのフィールドを比較する正しい方法は何ですか？

Question

だから、どうしたの？私は2つの入力フィールドnewPasswordとoldPasswordを持っています。これらの2つのフィールドが等しいかどうかをチェックして、エラーメッセージを表示したいと考えています。私は右理解しているので、場合

<form name="passwordForm" ng-submit="submitPasswordForm()" modelAttribute="userPasswordChange" novalidate> 
     <div class="row"> 
      <input path="oldPassword" type="password" id="oldPassword" name="oldPassword" placeholder="Old Password" ng-model="user.oldPassword" minlength="5" maxlength="128" required/> 
      <br> 
      <span ng-show="passwordForm.oldPassword.$dirty && passwordForm.oldPassword.$error.required">Old Password field can not be empty. Please check it and try again.</span> 
      <span ng-show="passwordForm.oldPassword.$error.minlength || passwordForm.oldPassword.$error.maxlength">Old password field size must be between 5 and 128</span> 
     </div> 
     <div class="row"> 
      <input path="newPassword" type="password" id="newPassword" name="newPassword" placeholder="New Password" ng-model="user.newPassword" minlength="5" maxlength="128" required diff-values="oldPassword"/> 
      <br> 
      <span ng-show="passwordForm.newPassword.$dirty && passwordForm.newPassword.$error.required">New Password field can not be empty. Please check it and try again.</span> 
      <span ng-show="passwordForm.newPassword.$error.minlength || passwordForm.oldPassword.$error.maxlength">New Password field size must be between 5 and 128</span> 
      <span ng-show="passwordForm.newPassword.$dirty && passwordForm.newPassword.$error.differentValues">New Password and Old Password fields must have different values.</span> 
     </div> 
     <div class="row"> 
      <input path="confirmPassword" type="password" id="confirmPassword" name="confirmPassword" placeholder="Confirm password" ng-model="user.confirmPassword" minlength="5" maxlength="128" same required/> 
      <br> 
      <span ng-show="passwordForm.confirmPassword.$dirty && passwordForm.confirmPassword.$error.required">Confirm password field can not be empty. Please check it and try again.</span> 
      <span ng-show="passwordForm.confirmPassword.$error.minlength || passwordForm.oldPassword.$error.maxlength">Confirm password field size must be between 5 and 128</span> 
     </div> 
     <div class="row"> 
      <input id="save" type="submit" value="Save" class="btn btn-primary" onsubmit="submitPasswordForm()" 
       ng-disabled="passwordForm.oldPassword.$dirty && passwordForm.oldPassword.$invalid 
          || passwordForm.newPassword.$dirty && passwordForm.newPassword.$invalid 
          || passwordForm.confirmPassword.$dirty && passwordForm.confirmPassword.$invalid"/> 
     </div> 
</form> 

、私は自分のディレクティブを作成する必要があります。 フォームは次のようになります。問題は、このタスクのために私もときに、古いパスワードの変更を観察する必要があるということである、と表現ショーの\非表示にするには、このスパンに従って

var postPasswordForm = angular.module('postPasswordForm', []); 
    postPasswordForm.directive('diffValues', function() { 
     return { 
      restrict: "A", 
      link: function (scope, elem, attr, ctrl) { 
      ctrl.$parsers.push(function (value) { 
       var compareWith = document.getElementById(attr.diffValues).value; 
       var currentVar = value; 
       ctrl.$setValidity('differentValues', compareWith !== currentVar); 

       console.log(scope);  
       return value; 
      }); 
     } 
    }; 
}); 

：だから私はこの方法でそれを実現し

<span ng-show="passwordForm.newPassword.$dirty && passwordForm.newPassword.$error.differentValues">New Password and Old Password fields must have different values.</span> 

ともちろんこの値を変更してください

passwordForm.newPassword.$error.differentValues: 

誰かが私を助け、正しい方法でそれを行う方法を説明できますか？私はどんなアイデア、説明、リンクも感謝します。 ありがとうございます。

私は次のようにすることを解決してきた

Answer 1

：

<form name="passwordForm" ng-submit="submitPasswordForm()" modelAttribute="userPasswordChange" novalidate> 
     <div class="row"> 
      <input path="oldPassword" type="password" id="oldPassword" name="oldPassword" placeholder="Old Password" ng-model="user.oldPassword" minlength="5" maxlength="128" required/> 
      <br> 
      <span ng-show="passwordForm.oldPassword.$dirty && passwordForm.oldPassword.$error.required">Old Password field can not be empty. Please check it and try again.</span> 
      <span ng-show="passwordForm.oldPassword.$error.minlength || passwordForm.oldPassword.$error.maxlength">Old password field size must be between 5 and 128</span> 
     </div> 
     <div class="row"> 
      <input path="newPassword" type="password" id="newPassword" name="newPassword" placeholder="New Password" ng-model="user.newPassword" minlength="5" maxlength="128" required diff-values="user.oldPassword"/> 
      <br> 
      <span ng-show="passwordForm.newPassword.$dirty && passwordForm.newPassword.$error.required">New Password field can not be empty. Please check it and try again.</span> 
      <span ng-show="passwordForm.newPassword.$error.minlength || passwordForm.oldPassword.$error.maxlength">New Password field size must be between 5 and 128</span> 
      **CHANGED HERE:**<span ng-show="passwordForm.newPassword.$dirty && passwordForm.newPassword.$error.differentValues">New Password field must be different from the Old Password field.</span> 
     </div> 
     <div class="row"> 
      <input path="confirmPassword" type="password" id="confirmPassword" name="confirmPassword" placeholder="Confirm password" ng-model="user.confirmPassword" minlength="5" maxlength="128" same required/> 
      <br> 
      <span ng-show="passwordForm.confirmPassword.$dirty && passwordForm.confirmPassword.$error.required">Confirm password field can not be empty. Please check it and try again.</span> 
      <span ng-show="passwordForm.confirmPassword.$error.minlength || passwordForm.oldPassword.$error.maxlength">Confirm password field size must be between 5 and 128</span> 
     </div> 
     <div class="row"> 
      <input id="save" type="submit" value="Save" class="btn btn-primary" onsubmit="submitPasswordForm()" 
       ng-disabled="passwordForm.oldPassword.$dirty && passwordForm.oldPassword.$invalid 
          || passwordForm.newPassword.$dirty && passwordForm.newPassword.$invalid 
          || passwordForm.confirmPassword.$dirty && passwordForm.confirmPassword.$invalid"/> 
     </div> 
</form> 

とディレクティブの機能はこの1つに変更：

postPasswordForm.directive('diffValues', function() { 
     return { 
      restrict: "A", 
      require: 'ngModel', 
      scope: { 
      otherModelValue: "=diffValues" 
      }, 
      link: function (scope, elem, attr, ctrl) { 
      ctrl.$validators.diffValues = function (modelValue) { 
       ctrl.$setValidity('differentValues', modelValue !== scope.otherModelValue); 
      }; 

      scope.$watch("otherModelValue", function() { 
       ctrl.$validate(); 
      }); 
     } 
    }; 
}); 

私はいくつかの簡単なせれば、とても残念な角度昨日の最初の時間を使用し始めましたもの。そして、私が理解したように、ドキュメントから$ validate（）を読むことができるので、より良い解決策ではありません - $ validatorsコレクションからすべてのバリデーターを呼び出します。しかし、私はそれらのうちの1つを実行する必要があります。どういうわけかできますか？またはこの解決策はOKですか？