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

问题描述：

我有一个奇怪的要求，希望得到一些帮助。Angular 2关注点击事件后的第一个无效输入

我需要关注单击按钮（未提交）后发现的第一个表单的无效输入。表单很大，因此屏幕需要滚动到第一个无效输入。

这AngularJS答案是什么，我需要，但不知道这样的指令将在角2要走的路：

Set focus on first invalid input in AngularJs form

会是什么角2路去做这个？感谢所有的帮助！

答

不幸的是，我现在不能测试这个，所以可能会有一些bug，但应该主要在那里。只需将其添加到您的表单。

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'); 
     } 
    } 
    } 
}

对不起，迟到的回应，我会得到一个测试这个！感谢您的帮助！ –

我们如何在没有jQuery的情况下做到这一点？ –

那么你可以移动到没有动画的元素，或者你可以编写自己的自定义动画功能（或使用别人的elses）。像这样的东西（http://stackoverflow.com/questions/8917921/cross-browser-javascript-not-jquery-scroll-to-top-animation） – Baconbeastnz

答

如果使用AngularMaterial，所述MdInputDirective具有焦点（）方法，该方法允许直接集中在输入字段。

在你的组件，就获得与@ViewChildren注释的参考所有的投入，这样的：

@ViewChildren(MdInputDirective) inputs: QueryList<MdInputDirective>;

然后，在第一个无效输入设定的重点是如此简单：

this.inputs.find(input => !input._ngControl.valid).focus()

答

我建议把这个在服务，对我来说它的工作是这样的：

if (this.form.valid) { 
    //submit 
} else { 
    let control; 
    Object.keys(this.form.controls).reverse().forEach((field) => { 
    if (this.form.get(field).invalid) { 
     control = this.form.get(field); 
     control.markAsDirty(); 
    } 
    }); 

    if(control) { 
    let el = $('.ng-invalid:not(form):first'); 
    $('html,body').animate({scrollTop: (el.offset().top - 20)}, 'slow',() => { 
     el.focus(); 
    }); 
    } 
}

答

我不知道这是否有效的方法，但这对我来说很好。

import { Directive, Input, HostListener, ElementRef } from '@angular/core'; 
import { NgForm } from '@angular/forms'; 
import * as $ from 'jquery'; 

@Directive({ selector: '[accessible-form]' }) 
export class AccessibleForm { 

    @Input('form') form: NgForm; 

    constructor(private el: ElementRef) { 

    } 

    @HostListener('submit', ['$event']) 
    onSubmit(event) { 
     event.preventDefault(); 

     if (!this.form.valid) { 
      let target; 

      target = this.el.nativeElement.querySelector('.ng-invalid') 

      if (target) { 
       $('html,body').animate({ scrollTop: $(target).offset().top }, 'slow'); 
       target.focus(); 
      } 
     } 
    } 

}

在HTML

<form [formGroup]="addUserForm" class="form mt-30" (ngSubmit)="updateUser(addUserForm)" accessible-form [form]="addUserForm"></form>

我已经混在这个angularjs访问的形式指令的方法。改进是欢迎的！

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

相关推荐