使用 @ViewChild 获取输入的 .nativeElement returns 'undefined'

Question

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

在 ngAfterViewInit 内部，nativeElement 位是未定义的，除非我从 #foobar = "ngForm" 中删除 = "ngForm" 部分。我通过进行以下调整克服了这个问题：

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

换句话说，我用一个与 ngForm.Even 无关的辅助标签 (#traralala) 丰富了输入元素，虽然这个解决方案有效，但我对它感到不自在，因为感觉就像我'我正在应用一个小技巧。我们应该能够以某种方式通过 @ViewChild 或通过 this.form.controls（或类似的东西）以更 elegant/straightforward 的方式检索文本框的本机元素，而无需像我使用的那样诉诸变通办法。但我不知道具体如何。

快速附录：如果这很重要，我正在使用 Angular2 2.0-beta7。

Answer 1

只需添加另一个模板变量

#foobar="ngForm" #foobarElement

@ViewChild("foobarElement") foobar: ElementRef;

使用 ="ngForm" 模板变量有不同的用途，不适用于 @ViewChild()

如果您认为这仍然有效，请考虑创建错误报告。

使用 @ViewChild 获取输入的 .nativeElement returns 'undefined'

Using @ViewChild to get hold of the .nativeElement of an input returns 'undefined'

forms

formbuilder

typescript

angular