FormBuilder is giving console errors

Question

I am trying to add validations to my form using this article. When I use the constructor with the FormBuilder it throws errors saying that EXCEPTION: Uncaught (in promise): Error: DI Error.

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;
  }
}

Below is the console errors

How do I fix this ?

I tried to put up a plunker with an example from angular docs but its giving out some other error,

Edit 1:

As suggested by AJT_82, I changed my constructor to constructor(private fb: FormBuilder){. However its now giving me another error

change your constructor... https://plnkr.co/edit/tEoVU9enXRGWOClJWVQT?p=preview — AT82, Apr 05 '17 at 11:57
@AJT_82 Why does it not work like the way its shown in docs https://angular.io/docs/ts/latest/api/forms/index/FormBuilder-class.html — Flying Gambit, Apr 05 '17 at 12:02
Which version of Angular are you using? The second error you are getting is because you need to import ReactiveFormsModule (and FormsModule) most probably. — AT82, Apr 05 '17 at 12:09
ok so I tried the same on plunker https://plnkr.co/edit/6T3NVkrMhfm5TrCnJIxO?p=preview and it works but its not working on my machine . Do you think this is a bug related to this version ? — Flying Gambit, Apr 05 '17 at 12:19
@AJT_82 its still the same on this section https://v2.angular.io/docs/ts/latest/api/forms/index/FormBuilder-class.html — Flying Gambit, Apr 05 '17 at 12:21
`@Inject` shouldn't be needed here at all though... http://stackoverflow.com/questions/36109555/how-to-use-dependency-injection-di-correctly-in-angular2 But what is the error you are getting now? Have you imported FormsModule and ReactiveFormsModule to your app module? :) — AT82, Apr 05 '17 at 12:41
@AJT_82 These are the imports I have `import {Component, Inject} from '@angular/core'; import {FormBuilder, FormGroup, FormControl, Validators} from '@angular/forms';` and error I am getting now is Edit 1 of my question — Flying Gambit, Apr 05 '17 at 12:54
I ask again, have you imported FormsModule and ReactiveFormsModule to your app module? :) I think that is your problem :) — AT82, Apr 05 '17 at 12:56
Oh good Lord, it works now, I thought reactiveForms were part of FormsModule. Thanks a lot — Flying Gambit, Apr 05 '17 at 13:01
@AJT_82 If you could post an answer, I would be more than happy to mark it as accepted — Flying Gambit, Apr 05 '17 at 13:03
Done! :) Good that your problem got sorted out, have a great day and happy coding! :) — AT82, Apr 05 '17 at 13:07

score 3 · Accepted Answer · answered Apr 05 '17 at 13:07

Change how you are trying to inject the FormBuilder in the constructor from:

constructor(@Inject(FormBuilder) fb: FormBuilder)

to simply:

constructor(private fb: FormBuilder)

As for the second error, this would suggest you need to make sure you have both FormsModule and ReactiveFormsModule in your app-module:

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

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

FormBuilder is giving console errors

1 Answers1