Korzystanie @ViewChild zdobyć na .nativeElement wejścia an powraca „niezdefiniowane”

Question

stworzyłem poniższy formularz w 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)); 
    } 
} 

Wewnątrz ngAfterViewInit bit nativeElement jest nieokreślony, chyba że usunięcie = „ngForm” część z #foobar = „ngForm” .I przezwycięża ten problem poprzez dokonanie poprawek:

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)); 
    } 
} 

innymi słowy, że wzbogacony element wejściowy z auxilary hashtag (#tralala), które nie są związane z ngForm.Even chociaż to rozwiązanie działa, nie czuję się z tym dobrze, ponieważ to czuję tak jakbym stosował mały hack. Powinniśmy być w stanie odzyskać natywny element pola tekstowego w bardziej elegancki/prosty sposób poprzez @ViewChild lub poprzez this.form.controls (lub coś podobnego) bez stosowania obejść takich jak ten, którego używałem. Ale nie mogę dokładnie określić, w jaki sposób.

Szybki addendum: Używam Angular2 2.0-beta7, jeśli to ma jakiekolwiek znaczenie.

Answer 1

Wystarczy dodać kolejny szablon zmienną

#foobar="ngForm" #foobarElement 

@ViewChild("foobarElement") foobar: ElementRef; 

Z ="ngForm" zmienna szablon dostaje inny cel i nie działa z @ViewChild()

Jeśli uważasz, że ten powinien nadal działać, należy rozważyć tworzenie raportu o błędzie.