AngularJs scroll

AngularJs scroll to error on submit and scroll to next error on next submit

Howto scroll down to form validation error when form invalid on submits in AngularJs?

Use the below link of code to achieve for the same –

var elm = $('input.ng-invalid select.ng-invalid');
if (elm.length) {
    elm.first().focus();
}

OR

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

OR

var scrollIntoAppView = function () {
    var elt = $(".ng-invalid");

    if (elt.length) {
        $('html, body').animate({
            scrollTop: (elt.first().offset().top)
        }, 500);
    }
}

Note: Use this above method on the top of you is submitting method.

2nd One Issue  - Scroll to first error in jQuery without a warning in JavaScript console

I am using below code -

$('html, body').animate({
    scrollTop: ($('.has-error').first().offset().top)
}, 500);

The above code is working fine but there is one small issue. The Issue Is - when no one field are required in the form I am getting below issue.

In JavaScript console, I get error - TypeError: $(...).first(...).offset(...) is undefined

Solution Is – check the length of invalid CSS is grater then zero.

var scrollIntoAppView = function () {
    var elt = $(".ng-invalid");

    if (elt.length) {
        $('html, body').animate({
            scrollTop: (elt.first().offset().top)
        }, 500);
    }
}

OR

var elm = $('input.ng-invalid select.ng-invalid');
if (elm.length) {
    elm.first().focus();
}

OR

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

I hope you enjoy with this solutions. Thanks for your times.
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

AngularJs scroll to error on submit and scroll to next error on next submit AngularJs scroll to error on submit and scroll to next error on next submit Reviewed by Anil Singh on 9:30 PM Rating: (5)
www.code-sample.com/. Powered by Blogger.
^