28

状況：

angular アプリでの即時検証にng-messagesディレクティブを使用しています。「パスワードの確認」フィールドを検証する必要があり、その方法がわかりません。

コード：

<form name="autentication_form" novalidate="" ng-submit="submit_register()">

    <label class="item item-input">
        <span class="input-label">Email</span>
        <input type="text" name="email" ng-model="registerData.email" required>

        <div class="form-errors" ng-messages="autentication_form.email.$error" role="alert" ng-if='autentication_form.email.$dirty'>
            <div class="form-error" ng-message="required">You did not enter the email</div>
        </div>
    </label>

    <label class="item item-input">
        <span class="input-label">Password</span>
        <input type="password" name="password" ng-model="registerData.password" required>

        <div class="form-errors" ng-messages="autentication_form.password.$error" role="alert" ng-if='autentication_form.password.$dirty'>
            <div class="form-error" ng-message="required">Please enter the password</div>
        </div>
    </label>

    <label class="item item-input">
        <span class="input-label">Password confirmation</span>
        <input type="password" name="password_confirmation" ng-model="registerData.password_confirmation" required>

        <div class="form-errors" ng-messages="autentication_form.password_confirmation.$error" role="alert" ng-if='autentication_form.password_confirmation.$dirty'>
            <div class="form-error" ng-message="required">Password confirmation required</div>
        </div>
    </label>

</form>

質問：

ng-messages を使用してパスワード確認が一致することを確認するにはどうすればよいですか?

4

6 に答える 6

22

最も簡単な方法は、パターンを使用することです。私にとってはうまくいきます！

<input type="password" name="new_password1" ng-model="new_password1">

<input type="password" name="new_password2" ng-pattern="\b{{new_password1}}\b" ng-model="new_password2">
<div ng-messages="passwordForm.new_password2.$error">
    <div ng-message="pattern">Not equal!!!</div>
</div>
于 2015-12-23T08:02:54.090 に答える
10

最善の方法は、ディレクティブを使用することです。ここでの主な問題点は、パスワードとパスワード確認入力の両方を監視する必要があることです。

これが役立つ解決策です

angular.module('app', ['ngMessages'])

.controller('ctrl', function($scope) {
  $scope.registerData = {};
})


.directive('confirmPwd', function($interpolate, $parse) {
  return {
    require: 'ngModel',
    link: function(scope, elem, attr, ngModelCtrl) {

      var pwdToMatch = $parse(attr.confirmPwd);
      var pwdFn = $interpolate(attr.confirmPwd)(scope);

      scope.$watch(pwdFn, function(newVal) {
          ngModelCtrl.$setValidity('password', ngModelCtrl.$viewValue == newVal);
      })

      ngModelCtrl.$validators.password = function(modelValue, viewValue) {
        var value = modelValue || viewValue;
        return value == pwdToMatch(scope);
      };

    }
  }
});
<html ng-app="app">

<head>
  <script data-require="angular.js@~1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
  <script data-require="angular-messages@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-messages.js"></script>
  <script src="https://code.angularjs.org/1.3.15/angular.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="ctrl">
  <form name="autentication_form" novalidate="" ng-submit="submit_register()">
    <label class="item item-input">
      <span class="input-label">Email</span>
      <input type="text" name="email" ng-model="registerData.email" required="" />
      <div class="form-errors" ng-messages="autentication_form.email.$error" ng-if='autentication_form.email.$touched'>
        <span class="form-error" ng-message="required">You did not enter the email</span>
      </div>
    </label>
    <label class="item item-input">
      <span class="input-label">Password</span>
      <input type="password" name="password" ng-model="registerData.password" required />
      <div class="form-errors" ng-messages="autentication_form.password.$error" ng-if='autentication_form.password.$touched'>
        <span class="form-error" ng-message="required">Please enter the password</span>
      </div>
    </label>
    <label class="item item-input">
      <span class="input-label">Password confirmation</span>
      <input type="password" name="password_confirmation" ng-model="registerData.password_confirmation" required="" confirm-pwd="registerData.password" />
      <div class="form-errors" ng-messages="autentication_form.password_confirmation.$error" ng-if='autentication_form.password_confirmation.$touched'>
        <span class="form-error" ng-message="required">Password confirmation required</span>
        <span class="form-error" ng-message="password">Password different</span>
      </div>
    </label>
  </form>
</body>

</html>

于 2015-07-28T10:19:33.873 に答える
4

開発時には、フォームの有効性に影響を与える独自のチェックを作成する必要があるという事実に直面する可能性があります。2 つの値の比較など、これらのチェックが単純な場合は、状況ごとに独自のチェックを作成するよりも、一般的なガイドラインを使用することをお勧めします。use-form-errorディレクティブを見てください。

jsfiddle のライブ例。

angular.module('ExampleApp', ['use', 'ngMessages'])
  .controller('ExampleController', function($scope) {

  });
.errors {
  color: maroon
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.min.js"></script>
<script src="https://cdn.rawgit.com/Stepan-Kasyanenko/use-form-error/master/src/use-form-error.js"></script>

<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">

    <form name="ExampleForm">
      <label>Password</label>
      <input ng-model="password" required />
      <br>
      <label>Confirm password</label>
      <input ng-model="confirmPassword" name="confirmPassword" use-form-error="isNotSame" use-error-expression="password && confirmPassword && password!=confirmPassword" required />
      <div ng-show="ExampleForm.$error.isNotSame" class="errors">Passwords Do Not Match!</div>
      <div ng-messages="ExampleForm.confirmPassword.$error" class="errors">
        <div ng-message="isNotSame">
          Passwords Do Not Match (from ng-message)!
        </div>
      </div>
    </form>

  </div>
</div>

于 2016-02-03T09:57:57.350 に答える
1

これが私がしたことです（を使用ng-pattern）：

<md-input-container class="md-block">
  <label>New Password</label>
  <input ng-model="user.password" name="password" type="password" required ng-pattern="'.{8,}'" />
  <div ng-messages="form.password.$error">
    <div ng-message="required">Password required.</div>
    <div ng-message="pattern">Password must be at least 8 characters.</div>
  </div>
</md-input-container>
<md-input-container class="md-block">
  <label>Confirm Password</label>
  <input ng-model="user.confirmPassword" name="confirmPassword" type="password" ng-pattern="user.password|escapeRegex" required />
  <div ng-messages="form.confirmPassword.$error">
    <div ng-message="required">Password confirmation required.</div>
    <div ng-message="pattern">Passwords do not match.</div>
  </div>
</md-input-container>

そして、次のフィルターはng-pattern正規表現をリテラルに変換します。

module.filter('escapeRegex', function(){
  return function(str){
    return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
  }
});
于 2017-04-21T05:41:41.927 に答える
-2

私はイオン（html）検証のみを使用しました。

新しいパスワード 新しいパスワードが必要です 

<label class="item item-input inputRadius">
<span class="input-label">Confirm Password</span>
<input type="password" placeholder="Confirm Password" ng-model="passwordUpdateInfo.confirmPassword" name="confirmPassword" required>
</label>
<div ng-show="passwordUpdateForm.$submitted || passwordUpdateForm.confirmPassword.$touched">
<div ng-show="passwordUpdateForm.confirmPassword.$error.required" class="errorMessage">Confirm Password is required</div>
</div>
<div ng-show="passwordUpdateInfo.confirmPassword.length > 0 && passwordUpdateInfo.confirmPassword != passwordUpdateInfo.newPassword">
    Password not match..(amar from india)
</div>
<button class="button button-positive button-block" ng-disabled="passwordUpdateInfo.confirmPassword.length > 0 && passwordUpdateInfo.confirmPassword != passwordUpdateInfo.newPassword">Update</button>
于 2016-01-17T12:54:36.313 に答える