Tips To Solve the Error “No provider for FormBuilder”

JavaScript helps programmers create interactive applications and web pages that can have a great impact on users. It is a popular programming language that is frequently used to design various projects in an interactive way. JavaScript makes coding simpler for programmers with the frameworks. Angular is a JavaScript framework or rather say superheroic framework used for creating dynamic web applications as well as mobile applications. It is a front-end open-source platform to build single-page applications. When you are working with Angular, you may experience the error “no provider for FormBuilder”.

Though the error makes you feel stuck in the middle of the programming, it is always possible to fix it. Go through the post to find ways to solve the error. Check out how the error pops up

How do you get the error?

When you are working on an Angular 9 project, you get the following error

No provider for FormBuilder

You have tried the following along with adding FormModule to the app.module.ts file

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

  imports: [

That results in the error. Have a look at it

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[FormBuilder -> FormBuilder -> FormBuilder]:

  NullInjectorError: No provider for FormBuilder!
NullInjectorError: R3InjectorError(AppModule)[FormBuilder -> FormBuilder -> FormBuilder]: 
  NullInjectorError: No provider for FormBuilder!

The program code looks like this:


import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router';
import { FormGroup, FormBuilder } from '@angular/forms';
import { AuthService } from '../../services/auth.service';

  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
export class LoginComponent implements OnInit {

  loginForm: FormGroup;

  constructor(private authService: AuthService, private formBuilder: FormBuilder, private router: Router) {

  ngOnInit(): void {
    this.loginForm ={
      username: [''],
      password: ['']

  get f() { return this.loginForm.controls; }

  login() {
        username: this.f.username.value,
        password: this.f.password.value
    .subscribe(success => {
      if (success) {



import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './auth/containers/login/login.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatToolbarModule } from '@angular/material/toolbar';
import { FormsModule } from '@angular/forms';
import { ApprovalListComponent } from './approval-list/component/approval-list.component';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { MatTableExporterModule } from 'mat-table-exporter';

  declarations: [
  imports: [
  providers: [LoginComponent],
  bootstrap: [AppComponent]
export class AppModule { }

After the script, that’s how you end up with the error warning. Let’s figure out ways to resolve the error

Ways to Fix the Error “no provider for FormBuilder”

We sum up a few options to make you solve the error effectively. You can try out the one that is suitable for your project’s current status.

Option 1 – Replace FormBuilder with ReactiveFormsModule

To fix the error, you just need to make a minor change in your code. You need to replace FormBuilder with ReactiveFormModule. The code should look like this:

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

  imports: [

With this module, you can use formControl as well as formGroup directives.

Option 2 – Edit app.module.ts

Another way to solve the error is to edit app.module.ts. You need to add FormsModule as well as ReactiveFormsModule in your file. Follow the code to implement

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

  imports: [


Option 3 – Import correctly

To get rid of the error, you need to first add this import into app.module.ts. Like this:

import { FormBuilder } from '@angular/forms';
import { FormBuilder } from '@angular/forms';

After this add FormBuilder the following way:

providers: [


We discussed the options to help you resolve the error “no provider for FormBuilder”. You can simply and effectively fix the error by implementing the above-mentioned options.

I hope it helps!

Don’t hesitate to ask for help if you have any confusion. You just need to comment in the below box and we will get back to you!

Leave a Reply

Your email address will not be published. Required fields are marked *