angularjs

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>

有关更多信息和演示，请参阅下面的 link。

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 和验证未按预期工作

angularjs - ngMessages and validation not working as expected

ng-messages