Categories

Friday, June 21, 2024
#919814419350 therichposts@gmail.com
AngularAngular 18Bootstrap 5

Create a User Login and Registration forms with validations using Angular 18

Create a User Login and Registration forms with validations using Angular 18

Hello guys how are you? Welcome back on my blog. Guys today in this blog post we will Create a User Login and Registration forms with validations using Angular 18.

Live Demo

To create a user login and registration interface using Angular 18 standalone components with Bootstrap 5, you can follow these steps. The example below will include forms with validations.

  1. Install Angular CLI (if not already installed):
   npm install -g @angular/cli
  1. Create a new Angular project:
   ng new angular-auth-app
   cd angular-auth-app
  1. Install Bootstrap 5:
   npm install bootstrap
  1. Include Bootstrap in angular.json:
   "styles": [
     "node_modules/bootstrap/dist/css/bootstrap.min.css",
     "src/styles.css"
   ]
  1. Generate Login and Register Components:
   ng generate component login 
   ng generate component register 
  1. Modify login.component.ts:
   import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule]
})
export class LoginComponent {
  loginForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.loginForm = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(6)]],
    });
  }

  onBlur(field: string) {
    this.loginForm.get(field)!.markAsTouched();
  }

  onSubmit() {
    if (this.loginForm.valid) {
      console.log(this.loginForm.value);
    }
  }
}
  1. Modify login.component.html:
   <div class="container mt-5">
  <div class="row justify-content-center">
    <div class="col-md-6">
      <div class="card">
        <div class="card-header text-center">
          <h2>Login</h2>
        </div>
        <div class="card-body">
          <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
            <div class="mb-3">
              <label for="email" class="form-label">Email address</label>
              <input type="email" class="form-control" id="email" formControlName="email" (blur)="onBlur('email')">
              <div *ngIf="loginForm.get('email')!.touched && loginForm.get('email')!.invalid" class="text-danger">
                <small *ngIf="loginForm.get('email')!.errors?.['required']">Email is required.</small>
                <small *ngIf="loginForm.get('email')!.errors?.['email']">Email is invalid.</small>
              </div>
            </div>
            <div class="mb-3">
              <label for="password" class="form-label">Password</label>
              <input type="password" class="form-control" id="password" formControlName="password" (blur)="onBlur('password')">
              <div *ngIf="loginForm.get('password')!.touched && loginForm.get('password')!.invalid" class="text-danger">
                <small *ngIf="loginForm.get('password')!.errors?.['required']">Password is required.</small>
                <small *ngIf="loginForm.get('password')!.errors?.['minlength']">Password must be at least 6 characters long.</small>
              </div>
            </div>
            <div class="d-grid">
              <button type="submit" class="btn btn-primary" [disabled]="loginForm.invalid">Login</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
  1. Modify register.component.ts:
   import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css'],
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule]
})
export class RegisterComponent {
  registerForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.registerForm = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(6)]],
      confirmPassword: ['', Validators.required]
    }, { validator: this.passwordMatchValidator });
  }

  passwordMatchValidator(form: FormGroup) {
    return form.get('password')!.value === form.get('confirmPassword')!.value
      ? null : { 'mismatch': true };
  }

  onBlur(field: string) {
    this.registerForm.get(field)!.markAsTouched();
  }

  onSubmit() {
    if (this.registerForm.valid) {
      console.log(this.registerForm.value);
    }
  }
}
  1. Modify register.component.html:
  <div class="container mt-5">
  <div class="row justify-content-center">
    <div class="col-md-6">
      <div class="card">
        <div class="card-header text-center">
          <h2>Register</h2>
        </div>
        <div class="card-body">
          <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
            <div class="mb-3">
              <label for="email" class="form-label">Email address</label>
              <input type="email" class="form-control" id="email" formControlName="email" (blur)="onBlur('email')">
              <div *ngIf="registerForm.get('email')!.touched && registerForm.get('email')!.invalid" class="text-danger">
                <small *ngIf="registerForm.get('email')!.errors?.['required']">Email is required.</small>
                <small *ngIf="registerForm.get('email')!.errors?.['email']">Email is invalid.</small>
              </div>
            </div>
            <div class="mb-3">
              <label for="password" class="form-label">Password</label>
              <input type="password" class="form-control" id="password" formControlName="password" (blur)="onBlur('password')">
              <div *ngIf="registerForm.get('password')!.touched && registerForm.get('password')!.invalid" class="text-danger">
                <small *ngIf="registerForm.get('password')!.errors?.['required']">Password is required.</small>
                <small *ngIf="registerForm.get('password')!.errors?.['minlength']">Password must be at least 6 characters long.</small>
              </div>
            </div>
            <div class="mb-3">
              <label for="confirmPassword" class="form-label">Confirm Password</label>
              <input type="password" class="form-control" id="confirmPassword" formControlName="confirmPassword" (blur)="onBlur('confirmPassword')">
              <div *ngIf="registerForm.get('confirmPassword')!.touched && registerForm.get('confirmPassword')!.invalid" class="text-danger">
                <small *ngIf="registerForm.get('confirmPassword')!.errors?.['required']">Confirm Password is required.</small>
                <small *ngIf="registerForm.errors?.['mismatch']">Passwords do not match.</small>
              </div>
            </div>
            <div class="d-grid">
              <button type="submit" class="btn btn-primary" [disabled]="registerForm.invalid">Register</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
  1. Modify app-routs.ts:
  import { Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
export const routes: Routes = [
    { path: 'login', component: LoginComponent },
    { path: 'register', component: RegisterComponent },
    { path: '', redirectTo: '/login', pathMatch: 'full' }
];


  1. Modify app.component.html:
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">AuthApp</a>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" routerLink="/login">Login</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/register">Register</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<router-outlet></router-outlet>

3. Modify app.component.ts:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet, RouterLink } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, RouterLink],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'angular-auth-app';
}

4. Modify styles.css file for custom form styles:

/* You can add global styles to this file, and also import other style files */
/* src/styles.css */
body {
    background-color: #f8f9fa;
  }
  
  .card {
    margin-top: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  
  .card-header {
    background-color: #007bff;
    color: white;
    border-radius: 10px 10px 0 0;
  }
  

Step 4: Run the Application

ng serve

You now have a basic Angular application with standalone login and register components, using Bootstrap 5 for styling and form validation.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.