joydip.manna/ekart
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show server side validation errors

Browse Source
This commit is contained in:
kusowl 2026-02-23 12:17:14 +05:30
parent 2ca605feb4
commit 77532aaac2
2 changed files with 36 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/app/features/auth/components/register/register.html
View File

@ -1,45 +1,51 @@
<section class="my-10 sm:my-30 flex flex-col sm:flex-row space-x-20 justify-center items-center"> <section class="my-10 md:my-30 flex flex-col md:flex-row space-x-20 space-y-10 justify-center items-center">
<article class="space-y-6"> <article class="space-y-6">
<h1 class="text-3xl text-gray-800 font-space font-bold">Register</h1> <h1 class="text-3xl text-gray-800 font-space font-bold">Register</h1>
<h2 class="text-xl text-gray-600">Sign up with your<br />email address to get started</h2> <h2 class="text-xl text-gray-600">Sign up with your<br/>email address to get started</h2>
<div class="text-xs text-red-600 space-y-2">
@for (error of errors(); track error) {
<p>{{ error }}</p>
}
</div>
</article> </article>
<form [formGroup]="registerForm" (ngSubmit)="registerUser()" class="card max-w-11/12 sm:max-w-8/12 grid md:grid-cols-2 gap-4"> <form [formGroup]="registerForm" (ngSubmit)="registerUser()"
class="card max-w-11/12 sm:max-w-8/12 grid md:grid-cols-2 gap-4">
<article class="space-y-4"> <article class="space-y-4">
<fieldset class="fieldset"> <fieldset class="fieldset">
<legend class="fieldset-legend">Name</legend> <legend class="fieldset-legend">Name</legend>
<input type="text" class="input" formControlName="name" placeholder="Jhon Doe" /> <input type="text" class="input" formControlName="name" placeholder="Jhon Doe"/>
</fieldset> </fieldset>
<fieldset class="fieldset"> <fieldset class="fieldset">
<legend class="fieldset-legend">Mobile Number</legend> <legend class="fieldset-legend">Mobile Number</legend>
<input type="text" class="input" formControlName="mobile_number" placeholder="+X1 XXXXXXXXXX" /> <input type="text" class="input" formControlName="mobile_number" placeholder="+X1 XXXXXXXXXX"/>
</fieldset> </fieldset>
<fieldset class="fieldset"> <fieldset class="fieldset">
<legend class="fieldset-legend">Email</legend> <legend class="fieldset-legend">Email</legend>
<input type="text" class="input" formControlName="email" placeholder="Enter email here" /> <input type="text" class="input" formControlName="email" placeholder="Enter email here"/>
<p class="label">your-email-address@email.com</p> <p class="label">your-email-address@email.com</p>
</fieldset> </fieldset>
</article> </article>
<article class="space-y-4"> <article class="space-y-4">
<fieldset class="fieldset"> <fieldset class="fieldset">
<legend class="fieldset-legend">Password</legend> <legend class="fieldset-legend">Password</legend>
<input type="password" class="input" formControlName="password" placeholder="Type here" /> <input type="password" class="input" formControlName="password" placeholder="Type here"/>
</fieldset> </fieldset>
<fieldset class="fieldset"> <fieldset class="fieldset">
<legend class="fieldset-legend">Confirm Password</legend> <legend class="fieldset-legend">Confirm Password</legend>
<input type="text" class="input" formControlName="password_confirmation" placeholder="Type here" /> <input type="text" class="input" formControlName="password_confirmation" placeholder="Type here"/>
</fieldset> </fieldset>
<fieldset class="fieldset"> <fieldset class="fieldset">
<legend class="fieldset-legend">City</legend> <legend class="fieldset-legend">City</legend>
<input type="text" class="input" formControlName="city" placeholder="Your city name" /> <input type="text" class="input" formControlName="city" placeholder="Your city name"/>
</fieldset> </fieldset>
</article> </article>
<div class="flex flex-col col-span-2 gap-y-2"> <div class="flex flex-col col-span-2 gap-y-2">
<button type="submit" class="btn btn-black py-2 w-full">Register</button> <button type="submit" class="btn btn-black py-2 w-full">Register</button>
<a href="" class="text-xs text-gray-800 text-center w-full block hover:text-teal-600" <a href="" class="text-xs text-gray-800 text-center w-full block hover:text-teal-600"
>Already have an account ? Login</a >Already have an account ? Login</a
> >
</div> </div>
</form> </form>

31
src/app/features/auth/components/register/register.ts
View File

@ -1,7 +1,7 @@
import { Component, inject } from "@angular/core"; import {Component, inject, signal} from "@angular/core";
import { FormControl, FormGroup, ReactiveFormsModule } from "@angular/forms"; import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms";
import { AuthService } from "../../services/auth-service"; import {AuthService} from "../../services/auth-service";
import { RegisterUserRequest } from "../../../../core/models/user.model"; import {RegisterUserRequest} from "../../../../core/models/user.model";
@Component({ @Component({
selector: "app-register", selector: "app-register",
@ -12,19 +12,28 @@ import { RegisterUserRequest } from "../../../../core/models/user.model";
export class Register { export class Register {
authService = inject(AuthService); authService = inject(AuthService);
errors = signal<string[]>([]);
registerForm = new FormGroup({ registerForm = new FormGroup({
name :new FormControl(''), name: new FormControl(''),
email :new FormControl(''), email: new FormControl(''),
mobile_number : new FormControl(''), mobile_number: new FormControl(''),
password : new FormControl(''), password: new FormControl(''),
password_confirmation : new FormControl(''), password_confirmation: new FormControl(''),
city : new FormControl(''), city: new FormControl(''),
}); });
registerUser() { registerUser() {
this.authService.register(this.registerForm.value as RegisterUserRequest) this.authService.register(this.registerForm.value as RegisterUserRequest)
.subscribe(); .subscribe({
next: () => console.log('success'),
error: (error) => {
const errors: Record<number, string[]> = error?.error?.errors || {};
const errorMessages :string[] = Object.values(errors).flat();
this.errors.set(errorMessages) ;
}
});
} }
} }