Question

我采用了一个bootstrap指令，它监视表单上的所有输入元素，并更新其父div的CSS，以Bootstrap方式显示验证错误。手表会查看元素css类，如果存在ng-invalid，则会向父元素添加has-error。

element.find('.form-group').each(function () {
    var formGroup = $(this);
    var inputs = formGroup.find('input[ng-model],textarea[ng-model],select[ng-model]');
    if (inputs.length > 0) {
        inputs.each(function () {
            var input = $(this);

            scope.$watch(function () {
                return input.hasClass('ng-invalid') && (!input.hasClass('ng-pristine') || form.$submitted);
            }, function (isInvalid) {
                formGroup.toggleClass('has-error', isInvalid);
            });
        });
    }
});

原始指令取自S.O.的回答。我认为最初的答案来自于这个Reconcile Angular.js and Bootstrap form validation styling，但有人接受并扩展了它，我无法找到他们的答案。它还需要更多来自此show validation error messages on submit in angularjs的代码来处理阻止提交表单的问题，但我现在忽略了

该指令在使用同步验证器时工作正常，但是当我使用异步验证器时，它会将验证状态混淆。在使字段无效后，手表会触发，但input.hasClass('ng-invalid')会返回false。我不知道为什么会发生这种情况。

我在这里创建了一个plunkr http://plnkr.co/edit/0wUUPdZc0fYN6euvsIMl?p=preview

Answer 1

这里可以做的一件事是为每个表单组使用子表单，如果子表单无效，那么父表单本身将无效。

这是一个例子。 http://jsbin.com/luvegecalo/1

在使用异步验证时观察输入元素的CSS类并不像预期的那样工作

1 个答案: