angular - Angular 2.0 で formControl を使用してネイティブ HTML 入力要素にアクセスする方法

Question

私はAngular 2.0の最終リリースを使用しています。

私がしたいこと？ - 入力がフォーカスを受け取ったときにのみ、いくつかの通知 (警告、入力の要件) を表示したい。または、彼の親 ( the div) にmouse hoverイベントがある場合はさらに良いでしょう。

親（div）からこれを行うのは簡単です。(focus)=showNotifications() + ngIf だけで、作業は完了です。

しかし、この機能を show-notifications コンポーネント内にカプセル化し、再利用可能にしたい..

the control-を使用して show-notifications 内を渡すとすれ@Input()ば、にアクセスできる場合、この両方を行うことができnative HTML input elementますshow-notifications.component.ts。コードは次のとおりです。

app.component.html:

`<div>
   <label>Name: </label>
   <input formControlName="myName">
   <show-notifications [the_control]="myName" ></show-notifications>
</div>`

app.component.ts:

export class AppComponent {
    myName = new FormControl("defaultvalue",[some validators..])
}

show-notifications.component.html:

<div class="show_requirements" *ngIf="hasfocus or parentDivHasMouseHover"> // incorect code and logic - i know, but you can see the idea..

    <p *ngFor="let requirement of thisInputRequirements">{{requirement}}<p>

</div>

show-notifications.component.ts:

export class ShowNotificationsComponent {

    @Input() the_control;
    this.thisInputRequirements = // take them form firebase.
    this.thisInputCustomErrorMessages = // take them from firebase.

    // I implemented all this and works amazing but i want to do:

    //something like this:

    ngOnInit(){
        this.nativeInputElement = this.the_control.getNativeElement() // this of course doesn't work

        // the requirements are shown only when the input receive focus
        let source = Rx.DOM.focus(this.nativeInputElement);
        source.subscribe( x => this.hasFocus = true)

        // Or even better: 
        // the requirements are shown only when the parent has mouse hover
        // or any other event / endles posibilites here..

        let parent = getParentOf(this.nativeInputElement)
        let source = Rx.DOM.mouseover(parent);
        source.subscribe( x => this.parentDivHasMouseHover = true) // this will be some toggling functionality.
    }

}

質問：

formControl (myName = the_control) オブジェクトがある場合、ネイティブ要素にアクセスするにはどうすればよいですか?

別のコンポーネントで通知を行い、再利用可能にするより良い方法はありますか? エラーと入力要件を表示するために、アプリ全体でこれを既に正常に使用しています..

注: 最初にハッシュタグ構文 ( #myInput ) を使用して穴の html 入力を渡そうとしましたが、そこにフォームを表示し、show-notifications コンポーネント内で次のことを試みました: myInput.myName - コントロールにアクセスしますが、未定義になります。コントロールは、ネイティブ入力要素にはありません。そして、検証のためにそのコントロールが必要です:)