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

Question

我使用 Angular JS 创建了一个表单，其中包含大约 7 个输入元素。当我单击“提交”时，我希望表单向上滚动到所需的第一个空白字段。但现在它没有正确指向留空的字段。有什么办法可以解决这个问题吗？

Check the error here.

Answer 1

在提交表单之前，您可以检查表单是否有效，并使用.focus()来聚焦于该元素。

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

方法 #2 - 您还可以使用 $anchorScroll 服务

请参阅文档 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;
  }
};