L'utilisation de @ViewChild pour obtenir l'élément .nativeElement d'une entrée renvoie «non défini»

Question

J'ai créé le formulaire suivant dans 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));
    }
}

Dans ngAfterViewInit, le bit nativeElement n'est pas défini, sauf si je supprime la partie = "ngForm" de #foobar = "ngForm". J'ai surmonté ce problème en apportant les modifications suivantes:

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

En d'autres termes, j'ai enrichi l'élément d'entrée avec un hashtag auxiliaire (#tralala) qui n'est pas lié à ngForm.Même si cette solution fonctionne, je ne me sens pas à l'aise car j'ai l'impression d'appliquer un petit hack. Nous devrions en quelque sorte être en mesure de récupérer l'élément natif de la zone de texte d'une manière plus élégante/simple soit via @ViewChild ou via this.form.controls (ou quelque chose dans ce sens) SANS recourir à des solutions de contournement comme celle que j'ai utilisée. Mais je ne sais pas exactement comment.

Addendum rapide: j'utilise Angular2 2.0-beta7 si cela est important.

Answer 1

Ajoutez simplement une autre variable de modèle

#foobar="ngForm" #foobarElement

@ViewChild("foobarElement") foobar: ElementRef;

Avec ="ngForm", La variable de modèle a un objectif différent et ne fonctionne pas avec @ViewChild()

Si vous pensez que cela devrait encore fonctionner, pensez à créer un rapport de bogue.