使用带表单的ngFormModel指令时遇到了一些问题 它说“TypeError:无法在form_one中读取未定义的属性'验证者'(我从NG-BOOK 2教程编写此代码但它不起作用!)
import {Component} from 'angular2/core'
import {
FORM_DIRECTIVES,
FormBuilder,
ControlGroup,
Validators
} from 'angular2/common'
@Component({
selector: 'demo-form-sku-builder',
directives: [FORM_DIRECTIVES],
template: `
<div class="ui raised segment">
<h2 class="ui header">Demo Form: Sku with FormBuilder</h2>
<form class="ui form"
[ngFormModel]="myForm"
(ngSubmit)="onSubmit(myForm.value)">
<div class="field">
<label for="skuInput">SKU</label>
<input type="text"
id="skuInput"
placeholder="SKU"
[ngFormControl]="myForm.controls['sku']">
</div>
<button type="submit" class="ui button">Submit</button>
</form>
</div>
`
})
export class DemoFormSkuBuilder {
contructor (formBuilder) {
this.myForm = formBuilder.group({
'sku': ['', Validators.required]
})
}
onSubmit(value) {
console.log("you submitted value: ", value);
}
}
编辑:(@ Thierry Templier)
contructor (formBuilder) {
this.fb = formBuilder;
this.myForm = this.fb.group({
'sku': ['', Validators.required]
})
}
static get parameters() {
return [[FormBuilder]];
}
我的图书馆:
import 'es6-shim';
import 'reflect-metadata';
import 'zone.js/dist/zone-microtask'
import 'rxjs/Rx'
import 'es6-promise'
答案 0 :(得分:1)
您需要在组件中定义表单控件:
import {FormBuilder} from 'angular2/common';
@Component({
(...)
})
export class DemoFormSkuBuilder {
contructor (private fb:FormBuilder) {
this.form_one = this.fb.group({
(...)
});
}
}
您可以查看本文以获取更多详细信息,请参阅&#34;使用现有控件&#34;
部分修改强>
如果要在ES6中注入,则需要定义静态getter参数:
import {FormBuilder} from 'angular2/common';
@Component({
(...)
})
export class DemoFormSkuBuilder {
contructor (fb) {
this.fb = fb;
this.form_one = this.fb.group({
(...)
});
}
static get parameters() {
return [[FormBuilder]];
}
}
这是一个描述这种方法的工作人员:https://plnkr.co/edit/ymSUUCvG5NFvmCGqzj2r?p=preview。
看到这个问题: