Просмотр класса CSS элемента ввода при использовании асинхронной проверки не работает должным образом

Я взял директиву начальной загрузки, которая отслеживает все элементы ввода в форме и обновляет CSS своего родительского элемента div, чтобы отображать ошибки проверки способом 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);
            });
        });
    }
});

Первоначальная директива была взята из ответа на С.О. Я думаю, что исходный ответ получен из этого согласования Angular.js и проверки формы Bootstrap style, но кто-то взял его и расширил, и я не могу найти их ответ. Также требуется больше кода из этого показать сообщения об ошибках проверки при отправке в angularjs для предотвращения отправки формы, но я пока опускаю это

Директива отлично работает при использовании синхронных валидаторов, но когда я использую асинхронный валидатор, состояния проверки смешиваются. После того, как поле станет недействительным, часы сработают, но input.hasClass('ng-invalid') вернет false. Я в недоумении, почему это может произойти.

Я создал plunkr здесь http://plnkr.co/edit/0wUUPdZc0fYN6euvsIMl?p=preview


javascript angularjs twitter-bootstrap
person BenCr    schedule 12.01.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Здесь можно было бы использовать дочерние формы для каждой группы форм, и если дочерние формы недействительны, то и сама родительская форма будет недействительна.

Вот пример. http://jsbin.com/luvegecalo/1

person hrgui    schedule 13.01.2015
comment
Хорошее предложение, но я не хочу идти по маршруту вложенных форм. Один из наших клиентов все еще использует очень старую версию IE, и они не работают. - person BenCr; 14.01.2015