我在 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 无关的辅助标签 (#traralala) 丰富了输入元素。尽管这个解决方案有效,但我对它并不放心,因为感觉我在应用一个小的破解。我们应该能够通过 @ViewChild 或 this.form.controls (或类似的东西)以更优雅/直接的方式以某种方式检索文本框的 native 元素,而无需像我使用的那样诉诸变通办法。但我不知 Prop 体怎么做。
快速附录:如果有任何重要性,我正在使用 Angular2 2.0-beta7。
最佳答案
只需添加另一个模板变量
#foobar="ngForm" #foobarElement
@ViewChild("foobarElement") foobar: ElementRef;
使用 ="ngForm"
模板变量有不同的用途并且不适用于 @ViewChild()
如果您认为这仍然有效,请考虑创建错误报告。
关于forms - 使用@ViewChild 获取输入的 .nativeElement 返回 'undefined',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40323127/