Using @ViewChild to get hold of the .nativeElement of an input returns 'undefined'

angular, formbuilder, forms, typescript

Solution

Just add another template variable

#foobar="ngForm" #foobarElement

@ViewChild("foobarElement") foobar: ElementRef;

With `="ngForm"` the template variable gets a different purpose and doesn't work with `@ViewChild()`

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

Problem

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 = "ngForm" part from #foobar = "ngForm".I overcame this problem by making the following tweaks: ``` 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 auxilary hashtag (#tralala) which is not related to ngForm.Even though this solution works I don't feel at ease with it because it feels like I'm applying a small hack. We should somehow be able to retrieve the native element of the textbox in a more elegant/straightforward way either through @ViewChild or through this.form.controls (or something to that effect) WITHOUT resorting to workarounds like the one I used. But I can't figure out exactly how. Quick Addendum: I'm using Angular2 2.0-beta7 if that's of any importance.

Original source