Angular ng-messages: как проверить подтверждение пароля?

СИТУАЦИЯ:

Я использую ng-messages для мгновенной проверки в моем приложении angular. Все работает нормально, кроме одного: мне нужно проверить поле "подтверждение пароля" и не знаю, как это сделать.

КОД:

<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-сообщениям?

Ответ 1

Требовать контроллер ngModel.

Добавьте метод к объекту проверки правильности ngModel. Angular будет вызывать функцию при изменении значения модели. функция возвращает логическое значение, а возвращаемое значение false устанавливает соответствующее свойство ngModels $error.

Директива compare-to выглядит следующим образом:

var 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();
            });
        }
    };
};

module.directive("compareTo", compareTo);

Вы можете использовать директиву внутри разметки следующим образом:

<input type="password" name="confirmPassword" 
        ng-model="registration.user.confirmPassword"
        required 
        compare-to="registration.user.password" />

<div ng-messages="registrationForm.confirmPassword.$error"
      ng-messages-include="messages.html"></div>

Ответ 2

Самый простой способ - использовать шаблон. Прекрасно работает для меня!

<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>

Ответ 3

Лучший подход - использовать директиву. Основная проблема заключается в том, что необходимо следить за входами для ввода пароля и пароля.

Здесь решение, которое могло бы помочь

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="[email protected]~1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
  <script data-require="[email protected]" 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>

Ответ 4

При разработке вы можете столкнуться с тем, что вам нужно создать свои собственные проверки, которые повлияют на действительность формы. Если эти проверки просты, например сравнение двух значений, лучше использовать общее руководство, чем писать собственные проверки для каждой ситуации. Посмотрите use-form-error.

Пример Live на 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>

Ответ 5

Вот что я сделал (используя 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, "\\$&");
  }
});

Ответ 6

Я использовал только ионные (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>