FormBuilder给控制台错误
问题描述:
我想添加验证到我的表格using this article。 当我使用FormBuilder
的构造函数时,它会引发错误,说明EXCEPTION: Uncaught (in promise): Error: DI Error
。FormBuilder给控制台错误
test1.component.ts
import { Component, Inject, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { FormComponent } from '../form/form.component';
@Component({
selector: 'app-test1',
templateUrl: './test1.component.html',
styleUrls: ['./test1.component.css']
})
export class Test1Component extends FormComponent {
complexForm : FormGroup;
constructor(@Inject(FormBuilder) fb: FormBuilder){
super();
this.complexForm = fb.group({
'firstName' : "",
'lastName': "",
'gender' : "Female",
'hiking' : false,
'running' : false,
'swimming' : false
});
}
saveForm(){
console.log("Child Form save");
return true;
}
}
我该如何解决这个问题?
我试图把一个plunker with an example from angular docs但它给了一些其他错误,
编辑1:
正如AJT_82的建议,我改变了我的构造函数constructor(private fb: FormBuilder){
。但是其现在给我另一个错误
答
更改你如何试图从注入FormBuilder
在构造函数中:
constructor(@Inject(FormBuilder) fb: FormBuilder)
简单:
constructor(private fb: FormBuilder)
由于对于第二个错误,这表明你需要确保你有两个FormsModule
和您的应用程序模块在ReactiveFormsModule
:
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule,
ReactiveFormsModule,
]
....
})
改变你的构造...... https://plnkr.co/edit/tEoVU9enXRGWOClJWVQT?p=preview – Alex
@ AJT_82它为何不工作就像它的显示方式docs https://angular.io/docs/ts/latest/api/forms/index/FormBuilder-class.html –
您正在使用哪个版本的Angular?你得到的第二个错误是因为你最需要导入ReactiveFormsModule(和FormsModule)。 – Alex