Form Validation in Angular with Express API Integration MEAN

✅ Form Validation in Angular with Express API Integration

In this guide, you’ll learn how to:

Validate a form in Angular (both client-side and reactive form validation).

Send the validated data to an Express.js REST API.

Handle responses and errors.

🧱 Setup Overview

Front-end: Angular (Reactive Forms)

Back-end: Express.js (REST API with JSON)

🔹 1. Create the Angular Form

✅ Reactive Form Setup

Install Angular if needed:

bash

Copy

Edit

npm install -g @angular/cli

ng new angular-form-app

cd angular-form-app

Add ReactiveFormsModule in app.module.ts:

ts

Copy

Edit

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

@NgModule({

  imports: [ReactiveFormsModule],

})

export class AppModule {}

✅ Build the Form (in app.component.ts)

ts

Copy

Edit

import { Component } from '@angular/core';

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { HttpClient } from '@angular/common/http';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

})

export class AppComponent {

  userForm: FormGroup;

  successMessage = '';

  errorMessage = '';

  constructor(private fb: FormBuilder, private http: HttpClient) {

    this.userForm = this.fb.group({

      name: ['', [Validators.required, Validators.minLength(3)]],

      email: ['', [Validators.required, Validators.email]],

    });

  }

  onSubmit() {

    if (this.userForm.valid) {

      this.http.post('http://localhost:3000/users', this.userForm.value)

        .subscribe({

          next: (response) => this.successMessage = 'User added successfully!',

          error: (err) => this.errorMessage = 'Error occurred!',

        });

    }

  }

}

✅ Form Template (app.component.html)

html

Copy

Edit

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">

  <label>Name:</label>

  <input formControlName="name" />

  <div *ngIf="userForm.get('name')?.invalid && userForm.get('name')?.touched">

    Name is required (min 3 characters)

  </div>

  <label>Email:</label>

  <input formControlName="email" />

  <div *ngIf="userForm.get('email')?.invalid && userForm.get('email')?.touched">

    Enter a valid email

  </div>

  <button type="submit">Submit</button>

</form>

<p *ngIf="successMessage">{{ successMessage }}</p>

<p *ngIf="errorMessage">{{ errorMessage }}</p>

🔹 2. Create Express API (Back-End)

Set up Express:

bash

Copy

Edit

mkdir express-api

cd express-api

npm init -y

npm install express cors body-parser

Create index.js:

js

Copy

Edit

const express = require('express');

const cors = require('cors');

const app = express();

app.use(cors());

app.use(express.json());

app.post('/users', (req, res) => {

  const { name, email } = req.body;

  if (!name || !email) {

    return res.status(400).json({ message: 'Missing fields' });

  }

  console.log('Received data:', req.body);

  res.status(201).json({ message: 'User created' });

});

app.listen(3000, () => console.log('Server running on port 3000'));

Run your server:

bash

Copy

Edit

node index.js

🔹 3. Connect Angular to Express API

Make sure Angular is allowed to make cross-origin requests (cors handles this), and Angular is sending data using HttpClientModule.

Add HttpClientModule to app.module.ts:

ts

Copy

Edit

import { HttpClientModule } from '@angular/common/http';

@NgModule({

  imports: [HttpClientModule],

})

export class AppModule {}

✅ Summary

Angular performs form validation before submission.

Validated form data is sent to an Express API.

Express handles the request and sends a response.

You get success/error messages in your Angular UI.

Learn MEAN Stack Course

Read More

CRUD Operations Using MEAN Stack

Connecting Angular Frontend to a Node.js Backend

Visit Our Quality Thought Training in Hyderabad

Get Directions