I am using Angular 9.
I am getting the following error:
No provider for FormBuilder
It has been reported in many cases, and the general solution appears to be to add the FormsModule
to the app.module.ts
file.
e.g.
import { FormsModule } from '@angular/forms';
imports: [
FormsModule
I have tried this, but am still getting the error.
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!
Question
Am I maybe doing something that's changed in Angular 9? What do I need to do to fix this?
My code:
login.component.ts
import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router';
import { FormGroup, FormBuilder } from '@angular/forms';
import { AuthService } from '../../services/auth.service';
@Component({
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 = this.formBuilder.group({
username: [''],
password: ['']
});
}
get f() { return this.loginForm.controls; }
login() {
this.authService.login(
{
username: this.f.username.value,
password: this.f.password.value
}
)
.subscribe(success => {
if (success) {
this.router.navigate(['/secret-random-number']);
}
});
}
}
app.module.ts
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';
@NgModule({
declarations: [
AppComponent,
LoginComponent,
ApprovalListComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
BrowserAnimationsModule,
FlexLayoutModule,
MatFormFieldModule,
MatInputModule,
MatButtonModule,
MatCardModule,
MatToolbarModule,
FormsModule,
MatTableModule,
MatPaginatorModule,
MatSortModule,
MatTableExporterModule
],
providers: [LoginComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
The FormBuilder provides syntactic sugar that shortens creating instances of a FormControl , FormGroup , or FormArray . It reduces the amount of boilerplate needed to build complex forms.
What Does This Error Mean? Angular is trying to tell us that it doesn't know about the formGroup directive on the <form> element in your component. This usually happens when the wrong forms module is imported, the right module is imported in the wrong place or the ReactiveFormsModule is just not imported at all.
In Angular, a reactive form is a FormGroup that is made up of FormControls. The FormBuilder is the class that is used to create both FormGroups and FormControls.
form builder is ReactiveFormsModule
import { ReactiveFormsModule } from '@angular/forms';
imports: [
ReactiveFormsModule
you'll also need this module to use formGroup
and formControl
directives.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With