使用angular js自动滚动到第一个空白必填字段

Question

I have created a form using angular js with around 7 input elements. When I click on submit, I want the form to get scrolled up to the first blank field which is required. But now it is not correctly pointing to the field left blank. Any solution to resolve this ?

Check the error here.

Answer 1

before submitting the form, you can check whether the form is valid or not and use .focus() to focus on that element.

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

method #2 - You can also use $anchorScroll service

see the documentation here

$scope.onSubmit = function(yourForm) {
  if (!yourForm.$valid) {
    var id = angular.element("[name='" + yourForm.$name + "']").find('.ng-invalid:visible:first').data('id');
    $location.hash(id);
    $anchorScroll();
    return false;
  }
};