javascript - Angular 2关注点击/事件后的第一个无效输入

Question

我有一个奇怪的要求，希望得到一些帮助。

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

这个 AngularJS 答案将是我需要的，但不知道像这样的指令是否适合 Angular 2:

Set focus on first invalid input in AngularJs form

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。它只是通过返回返回列表中第一个元素的 document.querySelector() 转到页面上带有 .ng-invalid 的第一个元素。

使用方法:

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

我还在 Angular 的 Github 页面上发布了这个:https://github.com/angular/angular/issues/13158#issuecomment-432275834