Mastering Angular: Craft a Sleek Bank Account Form in Minutes!

Ever wondered how to create those sleek, interactive bank forms that users love? Dive into our step-by-step guide on building a dynamic bank account opening form with Angular. Unleash the power of reactive forms, enhance your developer toolkit, and give your users an experience they’ll rave about!

Alright, let’s break this down step by step for creating a bank account opening form in Angular:

1. Setting Up the Angular Project:

If you haven’t already, install Angular CLI and create a new project:

npm install -g @angular/cli
ng new bank-account-form
cd bank-account-form

2. Setting Up Angular Reactive Forms:

Install the required package and set up reactive forms in your application:

npm install @angular/forms

In app.module.ts, import ReactiveFormsModule:

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

@NgModule({
  declarations: [
    // ... your components here
  ],
  imports: [
    // ... other modules here
    ReactiveFormsModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. Creating the Form Component:

Generate a new component for the form:

ng generate component account-form

4. Building the Form:

In account-form.component.html, create the form structure. Use form controls and form groups to structure your form:

<form [formGroup]="accountForm" (ngSubmit)="onSubmit()">
    <label for="name">Full Name:</label>
    <input type="text" id="name" formControlName="name">

    <label for="email">Email:</label>
    <input type="email" id="email" formControlName="email">

    <label for="password">Password:</label>
    <input type="password" id="password" formControlName="password">

    <label for="pan">PAN Card Number:</label>
    <input type="text" id="pan" formControlName="pan">

    <label for="aadhaar">Aadhaar Card Number:</label>
    <input type="number" id="aadhaar" formControlName="aadhaar">

    <label for="address1">Address Line 1:</label>
    <input type="text" id="address1" formControlName="address1">

    <label for="address2">Address Line 2:</label>
    <input type="text" id="address2" formControlName="address2">

    <label for="pincode">Pin Code:</label>
    <input type="number" id="pincode" formControlName="pincode">

    <label for="state">State:</label>
    <select id="state" formControlName="state">
        <option value="">Select State</option>
        <option value="state1">State 1</option>
        <option value="state2">State 2</option>
        <!-- Add more states as needed -->
    </select>

    <label for="city">City:</label>
    <input type="text" id="city" formControlName="city">

    <button type="submit" [disabled]="!accountForm.valid">Submit</button>
</form>

In account-form.component.ts, set up the form controls and validations:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';

@Component({
  selector: 'app-account-form',
  templateUrl: './account-form.component.html',
  styleUrls: ['./account-form.component.css']
})
export class AccountFormComponent implements OnInit {
  accountForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.accountForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(8)]],
      pan: ['', [Validators.required, this.panValidator]],
      aadhaar: ['', [Validators.required, Validators.minLength(12), Validators.maxLength(12)]],
      address1: ['', Validators.required],
      address2: [''],
      pincode: ['', [Validators.required, Validators.minLength(6), Validators.maxLength(6)]],
      state: ['', Validators.required],
      city: ['', Validators.required]
    });
  }

  panValidator(control: AbstractControl): {[key: string]: any} | null {
    const valid = /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(control.value);
    return valid ? null : { invalidPan: { value: control.value } };
  }

  onSubmit(): void {
    if (this.accountForm.valid) {
      console.log(this.accountForm.value);
      // Handle form submission logic here
    } else {
      alert('Please fill in all required fields correctly.');
    }
  }
}

5. Styling:

Add the provided CSS to account-form.component.css.

body {
            font-family: Arial, sans-serif;
            margin: 50px;
        }
        .form-container {
            background-color: #f4f4f4;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        label {
            display: block;
            margin-bottom: 10px;
        }
        input[type="text"], input[type="email"], input[type="password"], input[type="number"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        select {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .submit-btn {
            padding: 10px 20px;
            background-color: #333;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

6. Running the Application:

Run the application using:

ng serve

Visit http://localhost:4200/ in your browser to see the form in action.

Notes:

• The form controls have been added to the HTML with the formControlName directive linking them to the corresponding controls in the TypeScript file.
• The PAN card validation is done using the custom panValidator function.
• The Aadhaar number and Pin Code have length validations.
• The onSubmit() method checks if the form is valid and then logs the form value. If the form isn’t valid, it alerts the user to fill in all required fields correctly.