web-dev-qa-db-ja.com

AngularJSのパスワード確認noMatchが機能していませんか？

私はここにこのスクリプトを持っています：

angular.module('UserValidation', []).directive('validPasswordC', function () {
    return {
        require: 'ngModel',
        link: function (scope, Elm, attrs, ctrl) {
            ctrl.$parsers.unshift(function (viewValue, $scope) {
                var noMatch = viewValue != scope.signupForm.password.$viewValue
                ctrl.$setValidity('noMatch', !noMatch)
            })
        }
    }
});

そしてここにhtmlがあります：

<div class="fieldset" ng-class="{'has-error':formData.password.$invalid && !formData.password.$pristine}">
   <label>Password</label>
   <input type="password" id="password" name="password" ng-model="formData.password" ng-minlength="8" ng-maxlength="20" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/" placeholder="password" required />

   <p ng-show="signupForm.password.$error.required" class="error">*</p>
   <p ng-show="signupForm.password.$error.minlength" class="error">
      Passwords must be between 8 and 20 characters.</p>
   <p ng-show="signupForm.password.$error.pattern" class="error">
      Must contain one lower &amp; uppercase letter, and one non-alpha character (a number or a symbol.)</p>
</div>

<div class="fieldset" ng-class="{'has-error':formData.password_c.$invalid && !formData.password_c.$pristine}">
   <label for="password_c">Confirm Password</label>
   <input type="password" id="password_c" name="password_c" ng-model="formData.password_c" placeholder="confirm password" valid-password-c required />

   <p ng-show="signupForm.password_c.$error.noMatch" class="error">Passwords do not match.</span>
   <p ng-show="signupForm.password_c.$error.required" class="error">*</p>
</div>

パスワードの文字検証は機能していますが、パスワードを確認するための「noMatch」機能が機能していません。

何が問題なのでしょうか？ありがとう！ :)

angularjsformsvalidationpassword-confirmation
5
kgam

元のパスワードもディレクティブに渡す必要があります/

以下の作業デモをご覧ください

var app = angular.module('app', []);
app.directive('validPasswordC', function() {
  return {
    require: 'ngModel',
    scope: {

      reference: '=validPasswordC'

    },
    link: function(scope, Elm, attrs, ctrl) {
      ctrl.$parsers.unshift(function(viewValue, $scope) {

        var noMatch = viewValue != scope.reference
        ctrl.$setValidity('noMatch', !noMatch);
        return (noMatch)?noMatch:!noMatch;
      });

      scope.$watch("reference", function(value) {;
        ctrl.$setValidity('noMatch', value === ctrl.$viewValue);

      });
    }
  }
});
app.controller('homeCtrl', function($scope) {




});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="homeCtrl">
    <p>Password:{{formData.password}}</p>
    <form name="signupForm">
      <div class="fieldset" ng-class="{'has-error':formData.password.$invalid && !formData.password.$pristine}">
        <label>Password</label>
        <input type="password" id="password" name="password" ng-model="formData.password" ng-minlength="8" ng-maxlength="20" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/" placeholder="password" required />

        <p ng-show="signupForm.password.$error.required" class="error">*</p>
        <p ng-show="signupForm.password.$error.minlength" class="error">
          Passwords must be between 8 and 20 characters.</p>
        <p ng-show="signupForm.password.$error.pattern" class="error">
          Must contain one lower &amp; uppercase letter, and one non-alpha character (a number or a symbol.)</p>
      </div>

      <div class="fieldset" ng-class="{'has-error':formData.password_c.$invalid && !formData.password_c.$pristine}">
        <label for="password_c">Confirm Password</label>
        <input type="password" id="password_c" name="password_c" ng-model="formData.password_c" placeholder="confirm password" valid-password-c="formData.password" required />

        <p ng-show="signupForm.password_c.$error.noMatch" class="error">Passwords do not match.</span>
          <p ng-show="signupForm.password_c.$error.required" class="error">*</p>
      </div>
    </form>
  </div>
</div>
17
sylwester

最も簡単なのはこれですが、これがコーディングの良い方法かどうかはわかりません。

<input ng-model="password" name="user_password" type="password" ng-required="true"  >
<input ng-model="confirmPassword" name="user_password" type="password" ng-required="true"  >
<span ng-show="pasword !== confirmPassword">Password mismatch</span>
11
santhosh

以下は、確認パスワードを確認するためにも機能します。

<div ng-app="myapp"  ng-controller="mainController as mnCtrl">
<form name="mnCtrl.useradd" ng-submit="mnCtrl.frmAdd()" novalidate  role="form">

<input ng-model="mnCtrl.fields.password" name="user_password" type="password" ng-required="true"  >

<input ng-model="mnCtrl.fields.cpassword"   name="user_cpassword" type="password" ng-required="true"  > 

<div ng-show=" mnCtrl.useradd.user_cpassword.$viewValue != '' && (mnCtrl.useradd.user_password.$viewValue != mnCtrl.useradd.user_cpassword.$viewValue)      ">Fields do not match!</div>

</form>
</div>
0
jinson