How to access the original HTML input element using formControl in Angular 2.0

Question

I am using the final release of Angular 2.0.

What do I want to do? - I want to show some notifications (warnings, requirements for input) only when the focus is on receiving input. Or even better, when its parent ( the div ) has a mouse hover event.

Doing this from the parent (div) is easy. Just (focus) = showNotifications () + ngIf - and the job is done.

But I want to encapsulate this functionality inside the show-notifications component and make it reusable.

Given that I skip the control inside notification shows using @Input() - I could get around this if I have access to the native HTML input element . You can see how in show-notifications.component.ts . Here is the code:

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. } } 

Question:

How to access my own element, given that I have a formControl object (myName = the_control)?

Is there a better way to make notifications in a separate component - and make it reusable? I have already successfully used this application in my entire application - to show errors and input requirements.

Note. I tried to pass the html input of the hole first, using the hashtag (#myInput) syntax and form it inside the show-notifications component that I tried to do: myInput.myName - to access the control, but I get undefined. The controls are missing from the original input element. And I need this control to check :)

Answer 1

I think you could use the # notation to pass an element to ShowNotificationsComponent :

 export class ShowNotificationsComponent { @Input() the_control; @Input() elm; //... } 

Then in the template:

 <input formControlName="myName" #elm> <show-notifications [the_control]="myName" [elm]="elm"></show-notifications> 

Answer 2

This is very basic. FormContrl is not required. you must create a local variable on the C # input element and pass the local variables to the method

 <div> <label for="firstname">First Name</label> <input name="fname" #nameFirst /> <label for="lastname">Last Name</label> <input name="lname" #nameLast /> </div> <button (click)="send(nameFirst , nameLast)">Submit</button> export class HtmlExample { send(firstName: HTMLInputElement, lastName: HTMLInputElement): void { console.log(`Hello ${firstName.value} ${lastName.value}`); firstName.value = ''; lastName.value = ''; } }