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 Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.