CODEWITHSUNDEEP
angular
Flying Gambit
Flying Gambit

Reputation: 1276

FormBuilder is giving console errors

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 enter image description here

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

enter image description here

Upvotes: 2

Views: 2681

Answers (1)

AVJT82
AVJT82

Reputation: 73357

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,
  ]
  ....
})

Upvotes: 3

Related Questions