Question

我想在角度2中实现反应式表单验证。当用户单击“提交”按钮时，页面将向上滚动到所需的错误。

server

这是正确的代码吗？这是投掷错误

typeError：无法读取属性＆＃39;焦点＆＃39;为null

Answer 1

您可以执行以下操作：

formSubmitFunction() {

  const firstElementWithError = document.querySelector('.ng-invalid');

  if (firstElementWithError) {
    firstElementWithError.scrollIntoView({ behavior: 'smooth' });
  }
}

您可以使用在表单验证中使用的任何类。

Answer 2

我使用 ElementRef 而不是 document.querySelector，因为 ElementRef 由特定于渲染的元素支持。在浏览器中，这通常是一个 DOM 元素，请在 Angular Docs 阅读更多内容。

constructor(private el: ElementRef) {}

在您的提交或点击方法中，获取第一个带有验证错误的元素。请注意，在所有输入都有效之前，表单也将具有 .ng-invalid。

const firstElementWithError = this.el.nativeElement.querySelector('form .ng-invalid');

如果你有固定的导航栏，你也需要考虑它的高度。

if (firstElementWithError) {
  const labelOffset = 50; // This is your offset based on the height of your navbar, etc...

let scrollTopPosition = controlEl.getBoundingClientRect().top + window.scrollY - labelOffset;

与 document.querySelector 元素不同，window.scroll 允许您指定滚动时的顶部位置。

  window.scroll({ behavior: 'smooth', top: scrollTopPosition });
}

Angular 2表单验证Error Scroll

2 个答案: