Form Validation in Angular Wizard through backend or dummy service

I am working on Angular to create wizard component with each wizard have form fields, I want to validate the form fields through backend or dummy backend service from the file.

<form [formGroup]="formGroup">
<ng-template matStepLabel>Basic Details</ng-template>

<div class="row">
<!-- Name Field -->
<mat-form-field class="form-field">
<mat-label>Name</mat-label>
<input matInput placeholder="Name" formControlName="name" required>
<mat-error *ngIf="formGroup.get('name')?.hasError('required') && formGroup.get('name')?.touched">
Name is required.
</mat-error>
</mat-form-field>

<!-- Email Field with validation -->
<mat-form-field class="form-field">
<mat-label>Email</mat-label>
<input matInput placeholder="Email" formControlName="email" required>
<mat-error *ngIf="formGroup.get('email')?.hasError('required') && formGroup.get('email')?.touched">
Email is required.
</mat-error>
<mat-error *ngIf="formGroup.get('email')?.hasError('email') && formGroup.get('email')?.touched">
Please enter a valid email address.
</mat-error>
</mat-form-field>
</div>

<div class="row">
<!-- City Field -->
<mat-form-field class="form-field">
<mat-label>City</mat-label>
<input matInput placeholder="City" formControlName="city" required>
<mat-error *ngIf="formGroup.get('city')?.hasError('required') && formGroup.get('city')?.touched">
City is required.
</mat-error>
</mat-form-field>

<!-- Zip Field with 5-digit validation -->
<mat-form-field class="form-field">
<mat-label>Zip Code</mat-label>
<input matInput placeholder="Zip Code" formControlName="zip" required>
<mat-error *ngIf="formGroup.get('zip')?.hasError('required') && formGroup.get('zip')?.touched">
Zip code is required.
</mat-error>
<mat-error *ngIf="formGroup.get('zip')?.hasError('pattern') && formGroup.get('zip')?.touched">
Please enter a valid 5-digit Zip code.
</mat-error>
</mat-form-field>
</div>
</form>


This is my first wizard page, and I want that the form data should be send to the backend service for validation and if there are errors coming from the backend it should display on the form page.
I tried to make validation in the form fields but I need to have that validation from backend service.

Continue reading...