Angular 2關注點擊事件後的第一個無效輸入

Question

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

我需要關注單擊按鈕（未提交）後發現的第一個表單的無效輸入。表單很大，因此屏幕需要滾動到第一個無效輸入。

這AngularJS答案是什麼，我需要，但不知道這樣的指令將在角2要走的路：

Set focus on first invalid input in AngularJs form

會是什麼角2路去做這個？感謝所有的幫助！

Answer 1

不幸的是，我現在不能測試這個，所以可能會有一些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'); 
     } 
    } 
    } 
} 

Answer 2

如果使用AngularMaterial，所述MdInputDirective具有焦點（）方法，該方法允許直接集中在輸入字段。

在你的組件，就獲得與@ViewChildren註釋的參考所有的投入，這樣的：

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

然後，在第一個無效輸入設定的重點是如此簡單：

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

Answer 3

我建議把這個在服務，對我來說它的工作是這樣的：

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

Answer 4

我不知道這是否有效的方法，但這對我來說很好。

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訪問的形式指令的方法。 改進是歡迎的！