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給控制檯錯誤

回答

相關問題