角2のフォーカスフォーム要素

Question

角度2のフォームを作成しましたが、今ではいくつかのフォーム検証を追加したいと思います。検証は機能していますが、今ではフォーム要素に焦点を当てたいと思います。これは私がこれまでに発見したどのような角度2で可能であることは、私はすなわち

this.renderer.invokeElementMethod(this.el.nativeElement, 'focus'); 

elementRefとレンダラを持つ要素を集中することができるということですが、私が代わりに私がフォーカスを設定したいelementRefを経由して要素にアクセスする必要はありません私のFormGroupオブジェクトの私のAbstractControlの1つ。すなわち

this.form.controls[ controlIndex ].focus 

これは角度2で可能ですか？どうすればフォームコントロールにフォーカスを設定できますか？

Answer 1

アプローチは、ディレクティブを作成し、パラメータとしてそれにthis.form.controls[ controlIndex ].hasErrorを渡すことになります。

@Directive({ 
    selector: '[focus-on-error]' 
}) 
export class FocusOnErrorDirective implements AfterViewInit { 
    constructor(public element: ElementRef) {} 
    @Input('focusOnError') focusOnError; 

    ngAfterViewInit() { 
     // put all your focusing logic here 
     // watches are also available here 
     element.focus() 
    } 
} 

その後、あなたはそれを使用することができ、あなたのフォーム要素に：あなたの助けを

<input type="text" focus-on-error="form.controls[ controlIndex ].hasError">