2017-06-12 10 views
0

私はAngularJSで作業していますが、両方のエントリが一致するかどうかを確認するパスワード確認フィールドを作成します。これを行うために、私はこのチュートリアルのカスタムディレクティブを使用しています:http://odetocode.com/blogs/scott/archive/2014/10/13/confirm-password-validation-in-angularjs.aspxカスタムパスワード検証ディレクティブが適用されていません

何らかの理由で、一致した検査でも結果が得られません。別のパスワードを入力すると、フィールドは引き続き有効とみなされます。私はAngularJSのカスタムディレクティブの使い方について何か不足していると思いますが、私はチュートリアルとまったく同じコードをそのまま使っているので少し混乱します。

また、関連する質問もここで確認しましたが、運はありません。

HTML:

<div ng-app="myApp"> 
    <h1>Register!</h1> 
    <form name="registrationForm" novalidate> 
     <div class="form-group"> 
      <label>User Name</label> 
      <input type="text" name="username" class="form-control" ng-model="registration.user.username" required /> 
      <p ng-show="registrationForm.username.$error.required">Required<br/><br/></p> 
     </div> 
     <div class="form-group"> 
      <label>Password</label> 
      <input type="password" name="password" class="form-control" ng-model="registration.user.password" required /> 
      <p ng-show="registrationForm.password.$error.required">Required<br/><br/></p> 
     </div> 
     <div class="form-group"> 
      <label>Confirm Password</label> 
      <input type="password" name="confirmPassword" class="form-control" ng-model="registration.user.confirmPassword" required compare-to="registration.user.password" /> 
      <p ng-show="registrationForm.confirmPassword.$error.required">Required<br/><br/></p> 
      <p ng-show="registrationForm.confirmPassword.$error.compareTo">Passwords must match !</p> 
     </div> 
     <div class="form-group"> 
      <button type="submit" class="btn btn-primary">Register!</button> 
     </div> 
    </form> 
</div> 

JS:

angular.module('myApp', []) 

.directive('compareTo', function(){ 
     return { 
     require: "ngModel", 
     scope: { 
      otherModelValue: "=compareTo" 
     }, 
     link: function(scope, element, attributes, ngModel) { 

      ngModel.$validators.compareTo = function(modelValue) { 
       return modelValue == scope.otherModelValue; 
      }; 

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

問題を示すJSFiddle:チュートリアルからhttp://jsfiddle.net/ptb01eak/

ワーキングPlunkrを:http://plnkr.co/edit/FipgiTUaaymm5Mk6HIfn?p=preview

ありがとうございます!

+0

上記のプランカとフィドルコードの間には多くの違いがあります。差がないことを確認してください –

答えて

1

問題はAngularJSのバージョンに由来し、私はjsfiddleでそれをAngularJS 1.5.6CDN link)に更新し、動作します(new jsfiddle)。

関連する問題