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

标签 javascript angular angular2-forms angular2-directives

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

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

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

Set focus on first invalid input in AngularJs form

Angular 2 的方法是什么?感谢所有的帮助!

最佳答案

这对我有用。这不是最优雅的解决方案,但考虑到我们在执行此特定任务时都遇到的 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

关于javascript - Angular 2关注点击/事件后的第一个无效输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41173027/

相关文章:

javascript - 谷歌地图 : Simple app not working on IE

javascript - 禁用整个站点的 IE8 加速器

angular - 类型 Observable<Observable<any[]>> 不可分配给类型 Observable<any[]>

forms - Angular 2 : How to get the selected value from different options of a form?

angular - 为什么 [disabled] ="canDisable"不适用于 Angular2 react 形式

angular - 表单控件设置值和更新有效性的方法

Javascript - 访问 JSON 对象数组

javascript:正则表达式匹配未包含在自定义标签中的单词

javascript - Angular 树组件不显示任何节点

angular - 使用@canActivate的Dart angular2