Установите фокус на первом недопустимом вводе в форме AngularJs

Вы также можете использовать angular.element

angular.element('input.ng-invalid').first().focus();

Просмотр

<form name="myForm" novalidate="novalidate" data-ng-submit="myAction(myForm.$valid)" autocomplete="off"></form>

Контроллер

$scope.myAction= function(isValid) {
    if (isValid) {
        //You can place your ajax call/http request here
    } else {
        angular.element('input.ng-invalid').first().focus();
    }
};

использовал ngMessages для проверки

Без jquery

angular.element($document[0].querySelector('input.ng-invalid')).focus();

При использовании этого метода необходимо передать $document в качестве параметра в вашем контроллере angular.

angular.module('myModule')
.controller('myController', ['$document', '$scope', function($document, $scope){
    // Code Here
}]);

Итак, ответ оказался проще, чем я думал.

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

Пример использования jQLite:

myApp.directive('accessibleForm', function () {
    return {
        restrict: 'A',
        link: function (scope, elem) {

            // set up event handler on the form element
            elem.on('submit', function () {

                // find the first invalid element
                var firstInvalid = elem[0].querySelector('.ng-invalid');

                // if we find one, set focus
                if (firstInvalid) {
                    firstInvalid.focus();
                }
            });
        }
    };
});

В этом примере используется директива Attribute, вы можете расширить пример, сделав ее директивой element (restrict: 'E'), и включить шаблон, который преобразует ее в. Однако это личное предпочтение.

Вы можете создать директиву в качестве некоторых других ответов или, в качестве альтернативы, вы можете подключить ее с помощью ng-submit и реализовать логику в контроллере.

Вид:

<form name='yourForm' novalidate ng-submit="save(yourForm)">
</form>

Контроллер:

$scope.save = function(yourForm) {
  if (!yourForm.$valid) {
    angular.element("[name='" + yourForm.$name + "']").find('.ng-invalid:visible:first').focus();
    return false;
  }
};

Вы можете использовать чистый jQuery для выбора первого недопустимого ввода:

$('input.ng-invalid').first().focus();

Я некоторое время обдумывал эту идею и придумал собственное решение, оно может помочь людям, которые не любят сканировать DOM, например, мне.

Насколько я могу судить, элементы формы регистрируются в согласованном порядке (т.е. сверху вниз), а их имена и состояния проверки доступны в области видимости через любое имя формы (например, $ scope.myForm).

Это заставило меня подумать, что есть способ найти первый недопустимый ввод формы, не просматривая DOM, а вместо этого просматривая внутренние структуры angular js. Ниже мое решение, но оно предполагает, что у вас есть другой способ фокусировки элементов формы, я транслирую в настраиваемую директиву, если трансляция соответствует имени элемента, она будет фокусироваться сама (что полезно само по себе, когда вы добираетесь до контролируйте, на каком элементе будет сосредоточена первая загрузка).

Функция для поиска первого недопустимого (в идеале - для контроллеров через службу)

function findFirstInvalid(form){
    for(var key in form){
        if(key.indexOf("$") !== 0){
            if(form[key].$invalid){
                return key;
            }
        }
    }
}

И настраиваемая директива фокуса

directives.directive('focus', function($timeout){
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function(scope, elem, attrs, ctrl){
            scope.$on('inputFocus', function(e, name){
                if(attrs.name === name){
                    elem.focus();
                }
            });
        }
    }
});

Я внес небольшие изменения в отличное решение, написанное iandotkelly. Это решение добавляет анимацию, которая запускается при прокрутке, и после этого фокусируется на выбранном элементе.

myApp.directive('accessibleForm', function () {
    return {
        restrict: 'A',
        link: function (scope, elem) {

            // set up event handler on the form element
            elem.on('submit', function () {

                // find the first invalid element
                var firstInvalid = elem[0].querySelector('.ng-invalid');

                // if we find one, we scroll with animation and then we set focus
                if (firstInvalid) {
                     angular.element('html:not(:animated),body:not(:animated)')
                    .animate({ scrollTop: angular.element(firstInvalid).parent().offset().top },
                        350,
                        'easeOutCubic',
                        function () {
                            firstInvalid.focus();
                        });
                }
            });
        }
    };
});

всего одна строка:

if($scope.formName.$valid){
    //submit
}
else{
    $scope.formName.$error.required[0].$$element.focus();
}

Вы можете добавить атрибут в каждый элемент формы, который является функцией (в идеале директивой), которая получает идентификатор поля. Этот идентификатор поля должен как-то коррелировать с вашим объектом $ error. Функция может проверить, есть ли идентификатор в вашем объекте $ error, и, если да, вернуть настройку атрибута для ошибки.

<input id="name" class="{{errorCheck('name')}}">

Если бы у вас была ошибка, он сгенерирует это.

<input id="name" class="error">

Вы можете использовать это, чтобы установить свой стиль, и теперь вы знаете, в каких полях есть ошибки. К сожалению, вы не знаете, какое поле первое.

Одно из решений - использовать jQuery и фильтр .first. Если вы пойдете по этому маршруту, посмотрите http://docs.angularjs.org/api/angular.element

Другое решение - добавить в поля формы параметр порядка полей для функции: {{errorCheck ('name', 1)}}. Вы можете поместить имена полей ошибок в массив, а затем отсортировать их по параметру порядка полей. Это может дать вам больше гибкости.

Надеюсь это поможет.

Меня вдохновил chaojidan выше, чтобы предложить этот вариант для тех, кто использует вложенные угловые ng-формы 1.5.9:

class FormFocusOnErr implements ng.IDirective
{
    static directiveId: string = 'formFocusOnErr';

    restrict: string = "A";

    link = (scope: ng.IScope, elem, attrs) =>
    {
        // set up event handler on the form element
        elem.on('submit', function () {

            // find the first invalid element
            var firstInvalid = angular.element(
                elem[0].querySelector('.ng-invalid'))[0];

            // if we find one, set focus
            if (firstInvalid) {
                firstInvalid.focus();
                // ng-invalid appears on ng-forms as well as 
                // the inputs that are responsible for the errors.
                // In such cases, the focus will probably fail 
                // because we usually put the ng-focus attribute on divs 
                // and divs don't support the focus method
                if (firstInvalid.tagName.toLowerCase() === 'ng-form' 
                    || firstInvalid.hasAttribute('ng-form') 
                    || firstInvalid.hasAttribute('data-ng-form')) {
                    // Let's try to put a finer point on it by selecting 
                    // the first visible input, select or textarea 
                    // that has the ng-invalid CSS class
                    var firstVisibleInvalidFormInput = angular.element(firstInvalid.querySelector("input.ng-invalid,select.ng-invalid,textarea.ng-invalid")).filter(":visible")[0];
                    if (firstVisibleInvalidFormInput) {
                        firstVisibleInvalidFormInput.focus();
                    }
                }
            }
        });            
    }
}

// Register in angular app
app.directive(FormFocusOnErr.directiveId, () => new FormFocusOnErr());

Это потому, что focus() не поддерживается в jqLite и из документации Angular по элементу.

Небольшая настройка, которую сказал @Sajan, сработала для меня,

angular.element("[name='" + this.formName.$name + "']").find('.ng-invalid:visible:first')[0].focus();

Метод, не основанный на директивах, может выглядеть так. Это то, что я использовал, поскольку у меня есть кнопка «Далее» внизу каждой страницы, которая на самом деле находится в index.html в нижнем колонтитуле. Я использую этот код в main.js.

if (!$scope.yourformname.$valid) {
      // find the invalid elements
      var visibleInvalids = angular.element.find('.ng-invalid:visible');


      if (angular.isDefined(visibleInvalids)){
        // if we find one, set focus
        visibleInvalids[0].focus();
      }

      return;
    }