Setting up Angular 14 reactive forms

Setting up Angular 14 reactive forms

In this step, we'll import and set up the reactive forms module in our Angular 14 project.

Open the src/app/app.module.ts file and import both ReactiveFormsModule and FormsModule then add them to the imports array: 

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

@NgModule({
  imports: [
    ReactiveFormsModule,
    FormsModule
  ],
})

export class AppModule { }

Step 10 - Adding the registration and login forms

In this step, we'll create the registration and login forms to our components.

Open the src/app/register.component.ts file and add the following code:

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

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})

export class RegisterComponent implements OnInit {
  registerForm: FormGroup;

  constructor(
    public formBuilder: FormBuilder,
    public authService: AuthService,
    public router: Router
  ) {
    this.registerForm= this.formBuilder.group({
      name: [''],
      email: [''],
      password: ['']
    })
  }

  ngOnInit() { }

  registerUser() {
    this.authService.register(this.registerForm.value).subscribe((res) => {
      if (res.result) {
        this.registerForm.reset()
        this.router.navigate(['login']);
      }
    })
  }
}

Next, open the src/app/register.component.html file and add the following code:

<div class="auth-wrapper">
    <form class="form-register" [formGroup]="registerForm" (ngSubmit)="registerUser()">
        <h3 class="h3 mb-3 font-weight-normal text-center">Register</h3>
        <div class="form-group">
            <label>Name</label>
            <input type="text" class="form-control" formControlName="name" placeholder="Enter name" required>
        </div>
        <div class="form-group">
            <label>Email address</label>
            <input type="email" class="form-control" formControlName="email" placeholder="Enter email" required>
        </div>
        <div class="form-group">
            <label>Password</label>
            <input type="password" class="form-control" formControlName="password" placeholder="Password" required>
        </div>
        <button type="submit" class="btn btn-block btn-primary">Register!</button>
    </form>
</div>

Next, let's add the login form. Open the src/app/login.component.ts file and update it as follows:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup } from "@angular/forms";

import { AuthService } from './auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})

export class LoginComponent implements OnInit {
  loginForm: FormGroup;

  constructor(
    public formBuilder: FormBuilder,
    public authService: AuthService,
    public router: Router
  ) {
    this.loginForm= this.formBuilder.group({
      email: [''],
      password: ['']
    })
  }

  ngOnInit() { }

  loginUser() {
    this.authService.login(this.loginForm.value)
  }
}

Next, open the src/app/login.component.html file and add the following code:

<div>
    <form class="form-login" [formGroup]="loginForm" (ngSubmit)="loginUser()">
        <h3 class="h3 mb-3 font-weight-normal text-center">Login</h3>
        <div class="form-group">
            <label>Email</label>
            <input type="email" class="form-control" formControlName="email" placeholder="Enter email" required>
        </div>
        <div class="form-group">
            <label>Password</label>
            <input type="password" class="form-control" formControlName="password" placeholder="Password">
        </div>
        <button type="submit" class="btn btn-block btn-primary">Login!</button>
    </form>
</div>

Step 11 - Getting the user profile

In this step, we'll get and display the user profile when the user is successfully logged in.

For example try to access the /user-profile/_id Angular URL without providing the invalid token. You will find out that server doesn’t render the user data.

Open the src/app/user-profile/user-profile.component.ts file and add the following code:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.css']
})

export class UserProfileComponent implements OnInit {
  currentUser: Object = {};

  constructor(
    public authService: AuthService,
    private activatedRoute: ActivatedRoute
  ) {
    let id = this.activatedRoute.snapshot.paramMap.get('id');
    this.authService.getUserProfile(id).subscribe(res => {
      this.currentUser = res.msg;
    })
  }

  ngOnInit() { }
}

Next, open the src/app/user-profile/user-profile.component.html file and add the following code:

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <h2 class="mb-4">Your User Information</h2>
            <p><strong>Name:</strong> </p>
            <p><strong>Email:</strong> </p>
        </div>
    </div>
</div>

Step 12 - Adding the logout button

In this step, we will add the logout, hiding and showing nav items in our MEAN stack user authentication app.

Open the src/app/app.component.ts file, import and inject AuthService and add the logout() method as follows:

import { Component } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  constructor(public authService: AuthService) { }

  logout() {
    this.authService.logout()
  }
}

Next, open the src/app/app.component.html file and add update it as follows:

<div>
  <button (click)="logout()" *ngIf="this.authService.isLoggedIn()" type="button" class="btn btn-primary">Logout</button>
</div>

<router-outlet></router-outlet>

Conclusion

In this tutorial, we've seen by example how to implement user authentication using REST APIs and JWT tokens in a MEAN stack web application. We've particularly looked how to create the frontend using Angular 14.

  • Date: