Create Angular Reactive Form With Validation.
Step 1. Create Component for User Form (Generate a new component for User Details Form).
ng g c userdetails
We have shown three main files in components of the project.
userdetails.component.html
userdetails.component.css
userdetails.component.ts
Step 2. Create HTML Design for User Details Form ( userdetails.component.html ).
<!DOCTYPE html>
<html>
<head>
<!-- Include Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<div class="card">
<div class="card-header bg-light">
<h3 class="text-center text-dark">User Details</h3>
</div>
<div class="card-body">
<form [formGroup]="userForm">
<div class="row">
<div class="form-group col-md-6">
<label for="fname">First Name:</label>
<input type="text" class="form-control" id="firstName" formControlName="FirstName"
placeholder="Enter first name"
[ngClass]="{ 'is-invalid': submitted && this.userForm.controls['FirstName'].errors }" />
<div *ngIf="submitted && this.userForm.controls['FirstName'].errors"
class="invalid-feedback" align="left">
<div *ngIf="this.userForm.controls['FirstName'].errors['required']">Please enter first
name</div>
</div>
</div>
<div class="form-group col-md-6">
<label for="lname">Last Name:</label>
<input type="text" class="form-control" id="lastName" formControlName="LastName"
placeholder="Enter last name"
[ngClass]="{ 'is-invalid': submitted && this.userForm.controls['LastName'].errors }" />
<div *ngIf="submitted && this.userForm.controls['LastName'].errors" class="invalid-feedback"
align="left">
<div *ngIf="this.userForm.controls['LastName'].errors['required']">Please enter last
name</div>
</div>
</div>
</div>
<div class="form-group">
<label for="gender">Gender:</label>
<select class="form-control" id="gender" formControlName="Gender"
[ngClass]="{ 'is-invalid': submitted && this.userForm.controls['Gender'].errors }">
<option [selected]="true">Select Gender</option>
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
<div *ngIf="submitted && this.userForm.controls['Gender'].errors" class="invalid-feedback" align="left">
<div *ngIf="this.userForm.controls['Gender'].errors['required']">Please select gender
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="BirthDate">Birth Date:</label>
<input type="date" class="form-control" id="BirthDate" formControlName="BirthDate" name="BirthDate"
[ngClass]="{ 'is-invalid': submitted && this.userForm.controls['BirthDate'].errors }">
<div *ngIf="submitted && this.userForm.controls['BirthDate'].errors" class="invalid-feedback"
align="left">
<div *ngIf="this.userForm.controls['BirthDate'].errors['required']">Please select date of
birth</div>
</div>
</div>
<div class="form-group col-md-6">
<label for="mobile">Phone:</label>
<input type="tel" class="form-control" id="mobile" formControlName="Phone"
placeholder="Enter mobile number" maxlength="10"
[ngClass]="{ 'is-invalid': submitted && this.userForm.controls['Phone'].errors }">
<div *ngIf="submitted && this.userForm.controls['Phone'].errors" class="invalid-feedback"
align="left">
<div *ngIf="this.userForm.controls['Phone'].errors['required']">Please enter 10 digits phone
number</div>
</div>
</div>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" formControlName="Email"
placeholder="Enter email address"
[ngClass]="{ 'is-invalid': submitted && this.userForm.controls['Email'].errors }">
<div *ngIf="submitted && this.userForm.controls['Email'].errors" class="invalid-feedback"
align="left">
<div *ngIf="this.userForm.controls['Email'].errors['required']">Please enter email address
</div>
</div>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" formControlName="Password"
placeholder="Enter password"
[ngClass]="{ 'is-invalid': submitted && this.userForm.controls['Password'].errors }">
<div *ngIf="submitted && this.userForm.controls['Password'].errors" class="invalid-feedback"
align="left">
<div *ngIf="this.userForm.controls['Password'].errors['required']">Please enter password
</div>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block" (click)="btnRegister()" >Register</button>
</form>
</div>
</div>
</div>
</body>
</html>
Step 3. Apply CSS in ( userdetails.component.css).
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.card {
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
padding: 20px;
}
.card-header {
background-color: #f9f9f9;
padding: 10px;
border-bottom: 1px solid #ddd;
border-radius: 5px 5px 0 0;
}
.card-body {
padding: 20px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.btn-primary {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.btn-primary:hover {
background-color: #0056b3;
}
.card-footer {
padding: 20px;
border-top: 1px solid #ddd;
border-radius: 0 0 5px 5px;
}
a {
text-decoration: none;
color: #007bff;
}
a:hover {
text-decoration: underline;
}
Step 4. Create a Model Folder (model) in the userdetails Component.
Step 5. Create an Interface for userdetails in the model folder ( Generate interface type of model ).
ng generate interface userdetails --type=model
Step 6. Declare parameters of the userdetails form in an interface (userdetails.model.ts).
export interface Userdetails {
UserId: number,
FirstName: any,
LastName: any,
Gender: any,
BirthDate: any,
Phone: any,
Email: any,
Password: any,
}
Step 7. Write Logic in ( userdetails.component.ts).
import { Component } from '@angular/core';
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { Userdetails } from './model/userdetails.model'; // import userdetails model
@Component({
selector: 'app-userdetails',
templateUrl: './userdetails.component.html',
styleUrls: ['./userdetails.component.css']
})
export class UserdetailsComponent {
//Form Submit
userForm!: UntypedFormGroup;
submitted = false;
constructor( public formBuilder: UntypedFormBuilder) { }
ngOnInit() {
// declare form with validation apply
this.userForm = this.formBuilder.group({
FirstName: ['', Validators.required],
LastName: ['', Validators.required],
Gender: ['', Validators.required],
BirthDate: ['', Validators.required],
Phone: ['', [Validators.required, Validators.minLength(10), Validators.pattern('[0-9]*')]],
Email: ['', [Validators.required, Validators.email]],
Password: ['', [Validators.required, Validators.minLength(8)]]
});
}
// form submit click
btnRegister() {
if (this.userForm.valid) {
let obj = <Userdetails>{};
obj = this.userForm.value;
// This obj get all value of userform
// This obj pass in your service call
// Example :
// this.commonService.insert('Your API Name', obj).subscribe({
// next: (data: any) => {
// },
// error: (err) => {
// },
// });
}
else {
this.submitted = true;
}
}
}