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

我使用了一个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.的一个答案中得到的。我认为最初的答案来自于此，但有人接受了它并扩展了它，我找不到他们的答案。这也需要更多的代码来处理阻止表单提交的问题，但我现在略去它

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

---

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

这里有一个例子。

---

建议不错，但我不想走嵌套表单路线。我们的一个客户仍然使用非常旧的IE版本，但它们不起作用。