angular2-forms - Angular 2 表单验证错误滚动

Question

我想在 angular 2 中实现响应式(Reactive)表单验证。当用户点击提交按钮时，页面将向上滚动到所需的错误。

@ViewChild('focuserror') errorElement: ElementRef;
      ngAfterViewInit() {
        this.renderer.invokeElementMethod(this.errorElement.nativeElement.querySelector('.ng-invalid'), 'focus');
       }

这是正确的代码吗？
它抛出错误

类型错误:无法读取 null 的属性“焦点”

Answer 1

你可以这样做:

formSubmitFunction() {

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

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

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