bir giriş döner 'tanımsız'

Question

ben angular2 aşağıdaki formu oluşturuldu:

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

İçinde ngAfterViewInit I = "ngForm" kaldırılmadığı sürece nativeElement biraz tanımsız I ngForm.Even ilişkili değildir bir yardımcı hashtag'in (#tralala) ile giriş elemanı zenginleştirilmiş diğer bir deyişle

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

: #foobar, kısım = "ngForm" .I aşağıdaki ince ayarlar yaparak bu sorunun üstesinden Bu çözüm işe yaramamış olsa da kendimi rahat hissetmiyorum çünkü küçük bir kesmek uygulamam gibi. Metin kutusunun ana elemanını, @ ViewChild veya this.form.controls (veya bu etkiyle ilgili bir şey) aracılığıyla, kullandığım gibi geçici çözümlere başvurmadan daha zarif/açık bir şekilde almamız gerekir. Ama tam olarak nasıl olduğunu anlayamıyorum.

Hızlı Ek: Herhangi bir önemi varsa Angular2 2.0-beta7 kullanıyorum.

Answer 1

Bir başka şablon değişkenini

#foobar="ngForm" #foobarElement 

şablon değişkeni farklı bir amaca alır ve bu hala çalışması gerektiğini düşünürsek @ViewChild()

ile çalışmıyor ="ngForm" ile

@ViewChild("foobarElement") foobar: ElementRef; 

ekleyin düşünün bir hata raporu oluşturmak.