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){。但是其现在给我另一个错误

来源

2017-04-05 Flying Gambit

改变你的构造...... 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

更改你如何试图从注入FormBuilder在构造函数中：

constructor(@Inject(FormBuilder) fb: FormBuilder)

简单：

constructor(private fb: FormBuilder)

由于对于第二个错误，这表明你需要确保你有两个FormsModule和您的应用程序模块在ReactiveFormsModule：

import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 

@NgModule({ 
    imports: [ 
    FormsModule, 
    ReactiveFormsModule, 
    ] 
    .... 
})

来源

2017-04-05 13:07:10 Alex

FormBuilder给控制台错误

回答

相关问题