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

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

@ -1,39 +1,45 @@
<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">
<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>
<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">
<fieldset class="fieldset">
<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 class="fieldset">
<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 class="fieldset">
<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>
</fieldset>
</article>
<article class="space-y-4">
<fieldset class="fieldset">
<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 class="fieldset">
<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 class="fieldset">
<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>
</article>
<div class="flex flex-col col-span-2 gap-y-2">

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

@ -1,7 +1,7 @@
import { Component, inject } from "@angular/core";
import { FormControl, FormGroup, ReactiveFormsModule } from "@angular/forms";
import { AuthService } from "../../services/auth-service";
import { RegisterUserRequest } from "../../../../core/models/user.model";
import {Component, inject, signal} from "@angular/core";
import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms";
import {AuthService} from "../../services/auth-service";
import {RegisterUserRequest} from "../../../../core/models/user.model";
@Component({
selector: "app-register",
@ -12,19 +12,28 @@ import { RegisterUserRequest } from "../../../../core/models/user.model";
export class Register {
authService = inject(AuthService);
errors = signal<string[]>([]);
registerForm = new FormGroup({
name :new FormControl(''),
email :new FormControl(''),
mobile_number : new FormControl(''),
password : new FormControl(''),
password_confirmation : new FormControl(''),
city : new FormControl(''),
name: new FormControl(''),
email: new FormControl(''),
mobile_number: new FormControl(''),
password: new FormControl(''),
password_confirmation: new FormControl(''),
city: new FormControl(''),
});
registerUser() {
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) ;
}
});
}
}