如何使 jQuery 输入验证函数与 Angular 模板一起使用？

Question

我正在使用 jQuery 函数来自动处理表单，并在使用 jQuery 时显示错误。我也在用 Bootstrap 3.

(function() {
    // Form Processing
    $('input').each(function() {
        var $this = $(this);
        $this.on('input', function() {
            if ($this.val().length === 0) {
                if ($this.attr('required')) {
                    $this
                        .parent('div.control-group')
                        .addClass('has-error')
                        .end()
                        .siblings('p.text-danger')
                        .empty()
                        .text('This field is required');
                } else {}
            } else {}
        });
    });
})();

基本上，这会检查是否需要一个字段。如果该字段无效，则会显示一条简单的错误消息。它也非常好用。

这里有一个基本模板可以让这项工作发挥作用：

<div class="control-group>
    <input type="email" required>
    <p class="text-danger"></p>
</div>

但是，当我使用 Angular 模板时，代码不会出现，因为 DOM 没有事先加载。我认为正确的做法是为此代码创建一个 Angular 指令。我对此有几个问题：

我把导数放在哪里？应该是 myapp.run 吗？
我创建衍生品的假设错了吗？有没有更好的方法来做到这一点，以便它与 Angular 一起使用？

谢谢。

Answer 1

您可以将 form 或 ng-form 指令与 ng-messages 指令结合使用，以避免将 jquery 与 angular

混用

例子

<form name="myForm">
  <label>
    Enter your name:
    <input type="text"
           name="myName"
           ng-model="name"
           ng-minlength="5"
           ng-maxlength="20"
           required />
  </label>
  <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>

  <div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="minlength">Your field is too short</div>
    <div ng-message="maxlength">Your field is too long</div>
  </div>
</form>

来源https://docs.angularjs.org/api/ngMessages/directive/ngMessages

如何使 jQuery 输入验证函数与 Angular 模板一起使用？

How to make a jQuery input validation function work with Angular templates?

jquery

twitter-bootstrap

angularjs

angularjs-ng-model