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模板一起使用？

1 个答案: