@ViewChild Mit ‚undefined‘ Halt des .nativeElement eines Eingangs kehrt

Question

ich das folgende Formular in angular2 erstellt bekommen:

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

Innen ngAfterViewInit die nativeElement Bit ist nicht definiert, es sei denn ich die = „ngForm“ entfernen Teil aus #foobar = „ngForm“ .I wand dieses Problem durch die folgenden Verbesserungen machen:

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

mit anderen Worten I das Eingangselement mit einer auxilary hashtag angereichert (#tralala), die nicht zu ngForm.Even zusammenzuhängt Obwohl diese Lösung funktioniert, fühle ich mich nicht wohl dabei, weil es sich anfühlt s wie ich einen kleinen Hack anwende. Wir sollten irgendwie in der Lage sein, das native Element des Textfelds eleganter/direkter zu finden, entweder durch @ViewChild oder durch this.form.controls (oder etwas in diesem Sinne), OHNE auf Workarounds wie die, die ich benutzt habe, zurückzugreifen. Aber ich kann nicht genau herausfinden, wie.

Quick Addendum: Ich verwende Angular2 2.0-beta7, wenn das von Bedeutung ist.

Answer 1

Fügen Sie einfach eine andere Vorlage Variable

#foobar="ngForm" #foobarElement 

@ViewChild("foobarElement") foobar: ElementRef; 

Mit ="ngForm" die Template-Variable einen anderen Zweck bekommt und funktioniert nicht mit @ViewChild()

Wenn Sie denken, dies immer noch funktionieren sollte, betrachten Erstellen eines Fehlerberichts