I have many fields like firstName, lastName, etc which is made required from the backend. If I submit the form without filling up the firstName, it throws the following error in the Network Preview. If I fill up firstName and leave lastName empty, it will throw another error: lastName is required in the Network Preview:

{
    "status": "failed",
    "error": {
        "message": "Invalid request data. Please review the request and try again.",
        "code": [
            {
                "message": "firstName is required",
                "code": "any.required"
            }
        ]
    }
}

HTML:

<input type="text" class="form-control" [(ngModel)]="registration.firstName">
<input type="text" class="form-control" [(ngModel)]="registration.lastName">
<button type="button" class="btn btn-success" (click)="createRegistration(registration)">Submit</button>

I simply want to throw the error message as shown in the Network Preview when someone try to click Submit button somewhere on the page:

<p>firstName is required</p>

TS:

createRegistration(registration:StudentRegistration){
    this.coreService.addRegistration(registration).subscribe({
      next: (res: any) => {
        this.registration = res.data || {} as StudentRegistration;
        this.opd.registration = res.data._id;
        this.createOpdStudent()
      },
      error: (err) => {
        console.log(err);
      }
    })
  }

I have seen a lot of frontend-validation tutorials in Angular but that’s just too much effort as I have to validate every field again in the frontend. I can’t find any backend validation tutorial like in my case.

PS: Working frontend method I don’t want to use as there are multiple forms with 100s of fields

<p *ngIf="registration.firstName == '' || registration.firstName == undefined">First name is compulsory</p>