Using @ViewChild to get .nativeElement input returns 'undefined'

Question

I created the following form in angular2:

import {Component, ElementRef, ViewChild, AfterViewInit} from "angular2/core"; import {Observable} from "rxjs/Rx"; import {ControlGroup, Control, Validators, FormBuilder} from "angular2/common"; @Component({ selector: "ping-pong", template: ` <form name="someform" [ngFormModel]="form"> <div class="form-group"> <input id="foobar" #foobar="ngForm" <-- without ="ngForm" everything works fine type="text" ngControl="foobar" value="" class="form-control" /> </div> </form> `, styles: [` form { width: 300px; } `] }) export class ChangepswdFormComponent implements AfterViewInit { @ViewChild("foobar") foobar: ElementRef; private form: ControlGroup; public constructor(formBuilder: FormBuilder) { this.form = formBuilder.group({ foobar: [""] }); } public ngAfterViewInit(): void { console.log(this.foobar.nativeElement); //observable doesnt work because nativeelement is undefined //Observable.fromEvent(this.foobar.nativeElement, "keyup").subscribe(data => console.log(data)); } } 

Inside ngAfterViewInit, the nativeElement bit is undefined unless I remove the part = "ngForm" from #foobar = "ngForm". I overcame this problem by making the following settings:

 import {Component, ElementRef, ViewChild, AfterViewInit} from "angular2/core"; import {Observable} from "rxjs/Rx"; import {ControlGroup, Control, Validators, FormBuilder} from "angular2/common"; @Component({ selector: "ping-pong", template: ` <form name="someform" [ngFormModel]="form"> <div class="form-group"> <input id="foobar" #foobar="ngForm" #tralala type="text" ngControl="foobar" value="" class="form-control" /> </div> </form> `, styles: [` form { width: 300px; } `] }) export class ChangepswdFormComponent implements AfterViewInit { @ViewChild("tralala") foobar: ElementRef; private form: ControlGroup; public constructor(formBuilder: FormBuilder) { this.form = formBuilder.group({ foobar: [""] }); } public ngAfterViewInit(): void { console.log(this.foobar.nativeElement); let keyups = Observable.fromEvent(this.foobar.nativeElement, "keyup"); keyups.subscribe(data => console.log(data)); } } 

In other words, I enriched the input element with an auxiliary hashtag (#tralala), which is not related to ngForm. Even though this solution works, I don’t feel easy with it, because it looks like I'm using a small hack. We need to somehow restore our own text field element in a more elegant / simple way, either through @ViewChild or through this.form.controls (or something like that) WITHOUT using workarounds like the one I used. But I can’t understand how exactly.

Quick add: I am using Angular2 2.0-beta7 if this is important.

Answer 1

Just add another template variable

 #foobar="ngForm" #foobarElement 

 @ViewChild("foobarElement") foobar: ElementRef; 

C ="ngForm" template variable gets a different target and does not work with @ViewChild()

If you think this should work anyway, consider creating a bug report.