Angular 2关注Click/Event后的第一个无效输入

Question

我有一个奇怪的要求,并希望得到一些帮助.

单击按钮(不提交)后,我需要关注表单的第一个找到的无效输入.表单相当大,因此屏幕需要滚动到第一个无效输入.

这个AngularJS答案将是我需要的,但不知道这样的指令是否是Angular 2的方法:

将焦点设置在AngularJs表单中的第一个无效输入上

Angular 2的方法是什么？感谢您的帮助!

Answer 1

这对我有用。 这不是最优雅的解决方案，但是考虑到Angular的限制，我们所有人都在完成这项特定任务，因此可以完成任务。

scrollTo(el: Element): void {
   if(el) { 
    el.scrollIntoView({ behavior: 'smooth' });
   }
}

scrollToError(): void {
   const firstElementWithError = document.querySelector('.ng-invalid');
   this.scrollTo(firstElementWithError);
}

async scrollIfFormHasErrors(form: FormGroup): Promise <any> {
  await form.invalid;
  this.scrollToError();
}

这可以使您逃避操纵DOM。它只是通过转到.ng-invalid页面上的第document.querySelector()一个元素，该元素将返回返回列表中的第一个元素。

要使用它：

this.scrollIfFormHasErrors(this.form).then(() => {
  // Run any additional functionality if you need to. 
});

我也将其发布在Angular的Github页面上：https : //github.com/angular/angular/issues/13158#issuecomment-432275834

Answer 2

不幸的是我现在无法测试这个,所以可能是一些错误,但应该主要在那里.只需将其添加到您的表单即可.

import {Directive, Input, HostListener} from '@angular/core';
import {NgForm} from '@angular/forms';

@Directive({ selector: '[scrollToFirstInvalid]' })
export class ScrollToFirstInvalidDirective {
  @Input('scrollToFirstInvalid') form: NgForm;
  constructor() {
  }
  @HostListener('submit', ['$event'])
  onSubmit(event) {
    if(!this.form.valid) {
      let target;
      for (var i in this.form.controls) {
        if(!this.form.controls[i].valid) {
          target = this.form.controls[i];
          break;
        }
      }
      if(target) {
        $('html,body').animate({scrollTop: $(target.nativeElement).offset().top}, 'slow');
      }
    }
  }
}