. Advertisement .
..3..
. Advertisement .
..4..
Hello everyone! We know you are dealing with the problem when using Angular9 and are here to help you correct it all. What are you waiting for? I am sure that you want to research the cause and effective method for the error. Don’t miss this article to explore one interesting topic that you may see.
The “No provider for FormBuilder” error when using Angular9 makes the trouble and the answer for this question will be disclosed in the following session here. Let’s follow along!
Why does it happen?
When using the Angular 9, you found the error below:
No provider for FormBuilder
Even, you tried to insert a FormsModule to another file of app.module.ts, this suggestion appears for your cases. Here is an example of this module:
import { FormsModule } from '@angular/forms';
imports: [
FormsModule
You did as the recommendation but the warning message is still displaying as follow:
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!
So, you are confusing the steps you have done in Angular9 and the code is being added for this code of “login.component.ts” is:
import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router';
import { FormGroup, FormBuilder } from '@angular/forms';
import { AuthService } from '../../services/auth.service';
@Component({
@Component({
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: ['']
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']);
}
});
}
}
And here is a code of the “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 { }
Solution for the “No provider for FormBuilder” issue
Here are some solutions we’ve put together. You can consult and choose the method that is suitable for you.
Approach 1: Edit app.module.ts
To resolve this problem, you need to import FormsModule and ReactiveFormsModule in this module. It is imported where you are using the FormBuilder. Using the code below:
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
imports: [
FormsModule,
ReactiveFormsModule,
Approach 2: Using this code:
import { ReactiveFormsModule } from '@angular/forms';
imports: [
ReactiveFormsModule
Remember using formControl and formGroup directives in this module.
Approach 3:
Firstly, import FormBuilder in app.module.ts
import { FormBuilder } from '@angular/forms';
then, import this:
providers: [
StatusBar,
SplashScreen,
FormBuilder,
Conclusion
Above is the method for the warning of “No provider for FormBuilder”. Hope this post helps those who are just starting to learn programming to fix it simply as our recommendation. If you are confused about any issue or have any suggestion related to our topics, please feel free to comment below! Thanks for reading and I hope you have a good day ahead!
Leave a comment