angularjs - ngMessages 和验证没有按预期工作

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。