Question

我正在为我的应用中的用户注册页面添加验证，并且我正在尝试使用ngMessages和内置angularjs验证。

我遇到了密码匹配和一般模式的奇怪行为。

以下是密码匹配的代码：

<span>Password (6 to 16 character)</span>
          <span class="item item-input">
                    <input type="password"
                           ng-model="userRegistration.password"
                           placeholder="password"
                           name="password"
                           ng-minlength="6"
                           ng-maxlength="16"
                           required
                           ng-class="{'invalid-input': userRegistrationForm.password.$touched && userRegistrationForm.password.$invalid }">
                </span>
          <!-- Form validation messages -->
          <div role="alert" class="error-message" ng-messages="userRegistrationForm.password.$error" ng-show="userRegistrationForm.password.$touched">
            <p ng-message="required">This field is required</p>
            <p ng-message="minlength">This field is too short</p>
            <p ng-message="maxlength">This field is too long</p>
          </div>
          <span>Confirm Password</span>
          <span class="item item-input">
                    <input type="password"
                           placeholder="confirm password"
                           ng-model="userRegistration.passwordConfirmation"
                           name="confpass"
                           ng-minlength="6"
                           ng-maxlength="16"
                           ng-pattern="/^{{userRegistration.password}}$/"
                           required
                           ng-class="{'invalid-input': userRegistrationForm.confpass.$touched && userRegistrationForm.confpass.$invalid }">
                </span>
          <!-- Form validation messages -->
          <div role="alert" class="error-message" ng-messages="userRegistrationForm.confpass.$error" ng-show="userRegistrationForm.confpass.$touched">
            <p ng-message="required">This field is required</p>
            <p ng-message="pattern">Password not matching!</p>
          </div>

问题在于，即使密码匹配，错误仍然存在，表明它不匹配，我无法弄清楚为什么会这样做。

模式不符合预期的另一个例子可以在下面的代码中找到：

<span>System ID</span>
          <span class="item item-input">
                    <input type="text"
                           ng-model="userRegistration.id"
                           placeholder="system id"
                           name="systemID"
                           ng-minlength="6"
                           ng-maxlength="6"
                           pattern="/:/"
                           required
                           ng-class="{'invalid-input': userRegistrationForm.systemID.$touched && userRegistrationForm.systemID.$invalid }">
                </span>
          <!-- Form validation messages -->
          <div role="alert" class="error-message" ng-messages="userRegistrationForm.systemID.$error" ng-show="userRegistrationForm.systemID.$touched">
            <p ng-message="required">This field is required</p>
            <p ng-message="pattern">Colons not required!</p>
            <p ng-message="minlength">This field is too short</p>
            <p ng-message="maxlength">This field is too long</p>
          </div>

我需要检查输入中是否添加了冒号，如果是，则显示和错误。如上所述，问题是即使没有冒号，仍然会显示消息。

我错过了什么？我显然使用ng-pattern和ng-messages错误，但无法理解原因。

任何帮助都会非常感激。

Codepen，这里有两个示例：http://codepen.io/NickHG/pen/NNZYwK?editors=1010

由于

Answer 1

我使用了一种不同的方法来使用ng-messages。我做了一个这样的自定义指令：

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

});

并像这样显示错误：

<div role="alert" class="error-message" 
ng-messages="userRegistrationForm.conf.$error" 
ng-show="userRegistrationForm.conf.$touched">
  <p ng-message="required">This field is required</p>
  <p ng-message="compareTo">Password not matching!</p>
</div>

有关详细信息和演示，请参阅以下链接。

Codepen演示：http://codepen.io/thepio/pen/rLNBWr?editors=1010

根据评论编辑：

以下是使用ng-pattern（无需指令）的示例：http://codepen.io/thepio/pen/zBYOPy?editors=1010

我将ng-change函数设置为第一个输入，并在控制器更改时设置正则表达式。然后我将其绑定到确认输入的ng-pattern并相应地显示ng-messages。

angularjs - ngMessages和验证无法按预期工作

1 个答案: