角度2フォーカスクリック/イベント

Question

た後、私は奇妙な要件を持っており、いくつかの助けを期待していました。

ボタンをクリックした後にフォームの無効な入力が最初に見つかりました（送信しない）。フォームはかなり大きく、スクリーンは最初の無効な入力にスクロールする必要があります。

このAngularJSの答えは私が必要となるかだろうが、このようなディレクティブは角度2に移動するための方法であるかどう知りませんでした：

Set focus on first invalid input in AngularJs form

角度2の方法だろう何これをする？すべての助けをありがとう！

Answer 1

残念ながら私は現時点でこれをテストすることはできませんので、いくつかのバグがあるかもしれませんが、ほとんどがそこにあるはずです。 フォームに追加するだけです。

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

これは有効なアプローチかどうかわかりませんが、これは私にとってはうってつけです。 HTML

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

で

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

} 

私はこれでangularjsアクセス可能な形式ディレクティブのアプローチを混合しています。 改善が歓迎されています！