title: Using @ViewChild to get hold of the .nativeElement of an input returns 'undefined'
body: <p>I created the following form in angular2:</p>
  
  <pre><code>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: `
                    &lt;form
                       name="someform"                             [ngFormModel]="form"&gt;
                        &lt;div class="form-group"&gt;
                            &lt;input                                 
                                id="foobar"                        #foobar="ngForm"   &lt;-- without ="ngForm" everything works fine
                                type="text"                        ngControl="foobar"
                                value=""
                                class="form-control"
                            /&gt;
                        &lt;/div&gt;
                    &lt;/form&gt;
                `,
      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 =&gt; console.log(data));
      }
  }
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>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: `
                    &lt;form
                       name="someform"                             [ngFormModel]="form"&gt;
                        &lt;div class="form-group"&gt;
                            &lt;input                                 
                                id="foobar"                        #foobar="ngForm"     #tralala
                                type="text"                        ngControl="foobar"
                                value=""
                                class="form-control"
                            /&gt;
                        &lt;/div&gt;
                    &lt;/form&gt;
                `,
      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 =&gt; console.log(data));
      }
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>Quick Addendum: I'm using Angular2 2.0-beta7 if that's of any importance.</p>