Angular Registration page does not load after adding methods & services - html

Question

I created an email authentication based registration page in my angular app, added the code with submission functionality (onSubmit) to register.component.html and the methods & services in register.component.ts & UserService.ts files.
Problem:
After adding the code as shared below, the registration page (register.component.html) itself does not load when I click the corresponding router link;
the issue is not with routing as it all worked fine until I added the methods & services.
No error thrown at time of compilation.
Pls suggest what to do.
Showing my respective files in register component:
register.component.html
<style>
.form-container {
display: flex;
align-items: center;
justify-content: center;
height: 50vh;
flex-wrap: wrap;
margin-top:25px;
}
.form-row {
display: flex;
flex-wrap: nowrap;
}
.form-group {
flex: 1;
margin: 20px;
}
</style>
<div class="registrationForm" type="FormGroup">
<form (ngSubmit)="onSubmit()">
<div class="form-row">
<div class="form-group">
<label for="exampleInputUsername">Username</label>
<input type="text" class="form-control" id="exampleInputUsername" placeholder="eg. Niti Sara">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email:</label>
<input type="email" [(ngModel)]="email" name="email" required class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="eg. john#doe.com">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="exampleInputPhone">Phone No.</label>
<input type="number" class="form-control" id="exampleInputPhone" placeholder="eg. [phone]" >
</div>
<div class="form-group">
<label for="exampleInputUrl">Website URL</label>
<input type="link" class="form-control" id="exampleInputUrl" placeholder="eg. https://example.com/">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="exampleInputCname">Your Organisation</label>
<input type="text" class="form-control" id="exampleInputCname" placeholder="eg. Enter Your Organisation Name">
</div>
</div>
<div class="form-row">
<label>Password:</label>
<input type="password" [(ngModel)]="password" name="password" required>
</div>
<button type="submit" class="btn btn-primary" style="margin-left:220px;margin-top:20px;">Submit</button>
</form>
</div>
register.component.ts
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router';
import { UserService } from 'src/app/register/UserService'; //import the user service
import { FormBuilder, FormGroup, Validators } from '#angular/forms'; //import form modules
#Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.less']
})
export class RegisterComponent implements OnInit {
registrationForm: FormGroup;
email:string ='';
password:string ='';
submitted = false;
constructor(
private formBuilder: FormBuilder,
private router: Router,
private userService: UserService,
)
{
this.registrationForm = this.formBuilder.group({});
}
ngOnInit() {
this.registrationForm = this.formBuilder.group({
email: [this.email, [Validators.required, Validators.email]],
password: [this.password, [Validators.required, Validators.minLength(6)]],
});
}
// convenience getter for easy access to form fields
get f() { return this.registrationForm.controls; }
onSubmit() {
this.submitted = true;
if (this.registrationForm.invalid) {
return;
}
//call the user service to register the user
this.userService.register(this.registrationForm.controls['email'].value, this.registrationForm.controls['password'].value)
.subscribe(data => {
// handle the response
});
//error handling can b introduced
}
}
UserService.ts
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { Observable } from 'rxjs';
#Injectable({
providedIn: 'root'
})
export class UserService {
private baseUrl = 'http://localhost:8080/'; // replace with your backend URL
constructor(private http: HttpClient) { }
//check the use of 'Observable'
register(email: string, password: string): Observable<any> {
const data = {
email: email,
password: password
};
return this.http.post(`${this.baseUrl}/register`, data);
}
}
This is what my browser console says:
ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[FormBuilder -> FormBuilder -> FormBuilder]:
NullInjectorError: No provider for FormBuilder!

Answer 1

Just import HttpClientModule in your app.module.ts. That's the only problem I can see here.

Answer 2

The problem was due to not adding FormsModule & ReactiveFormsModule in both app.module.ts & register.component.spec.ts
app.module.ts
import { FormsModule } from '#angular/forms';
import { ReactiveFormsModule } from '#angular/forms';
imports: [
FormsModule,
ReactiveFormsModule
],
register.component.spec.ts
import { FormsModule } from '#angular/forms';
import { ReactiveFormsModule } from '#angular/forms';
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ RegisterComponent ],
imports: [
FormsModule, // << ----- add this line
ReactiveFormsModule // << ----- add this line
]
})