✅ 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
Subscribe by Email
Follow Updates Articles from This Blog via Email
No Comments