From ffe6e167543922bd0e222c6088e887c8d8f256f5 Mon Sep 17 00:00:00 2001
From: ExostFlash <exostflash+pcportable@teamflash.fr>
Date: Tue, 4 Mar 2025 18:20:56 +0100
Subject: [PATCH] probleme entre address et codepostal pour le component html

---
 .../src/app/account/account.component.html    | 34 +++++++++++++++----
 angular/src/app/account/account.component.ts  |  1 +
 angular/src/styles.css                        |  4 +++
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/angular/src/app/account/account.component.html b/angular/src/app/account/account.component.html
index 2240c42..cfc1f9b 100644
--- a/angular/src/app/account/account.component.html
+++ b/angular/src/app/account/account.component.html
@@ -39,13 +39,19 @@
                     </div>
                     <div class="input-group mb-3" *ngIf="(infoForm.get('nameLast')?.invalid && infoForm.get('nameLast')?.touched) || 
                     (infoForm.get('nameFirst')?.invalid && infoForm.get('nameFirst')?.touched)">
-                        <div class="alert alert-danger  fs-40" role="alert" *ngIf="infoForm.get('nameLast')?.invalid && infoForm.get('nameLast')?.touched">
+                        <div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('nameLast')?.hasError('required') && infoForm.get('nameLast')?.touched">
                             Le nom est requis.
                         </div>
+                        <div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('nameLast')?.hasError('minlength') && infoForm.get('nameLast')?.touched">
+                            Le nom doit comporter au moins 3 caractères.
+                        </div>
                         <div class="alert alert-dark fs-40" role="alert"> — </div>
-                        <div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('nameFirst')?.invalid && infoForm.get('nameFirst')?.touched">
+                        <div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('nameFirst')?.hasError('required') && infoForm.get('nameFirst')?.touched">
                             Le prénom est requis.
                         </div>
+                        <div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('nameFirst')?.hasError('minlength') && infoForm.get('nameFirst')?.touched">
+                            Le prénom doit comporter au moins 3 caractères.
+                        </div>
                     </div>
 
                     <!-- Email -->
@@ -59,13 +65,27 @@
 
                     <!-- Adresse -->
                     <div class="input-group mb-3">
-                        <span class="input-group-text">Adresse</span>
-                        <textarea class="form-control" formControlName="address"></textarea>
+                        <input type="text" formControlName="address" class="form-control" placeholder="Adresse">
+                        <span class="input-group-text"> — </span>
+                        <input type="text" formControlName="codePostal" class="form-control fs-20" placeholder="Code Postal">
                     </div>
-                    <div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('address')?.invalid && infoForm.get('address')?.touched">
-                        L'adresse est requise.
+                    <div class="input-group mb-3" *ngIf="(infoForm.get('address')?.invalid && infoForm.get('address')?.touched) || 
+                    (infoForm.get('codePostal')?.invalid && infoForm.get('codePostal')?.touched)">
+                        <div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('address')?.hasError('required') && infoForm.get('address')?.touched">
+                            L'adresse est requise.
+                        </div>
+                        <div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('address')?.hasError('minlength') && infoForm.get('address')?.touched">
+                            L'adresse doit comporter au moins 10 caractères.
+                        </div>
+                        <div class="alert alert-dark fs-40" role="alert"> — </div>
+                        <div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('codePostal')?.hasError('required') && infoForm.get('codePostal')?.touched">
+                            Le code postal est requis.
+                        </div>
+                        <div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('codePostal')?.hasError('minlength') && infoForm.get('codePostal')?.touched">
+                            Le code postal doit comporter au moins 4 chiffres.
+                        </div>
                     </div>
-
+                    
                     <!-- Bouton Ajouter -->
                     <button type="submit" class="btn btn-primary w-100" [disabled]="infoForm.invalid">Ajouter</button>
 
diff --git a/angular/src/app/account/account.component.ts b/angular/src/app/account/account.component.ts
index da5bb06..c117579 100644
--- a/angular/src/app/account/account.component.ts
+++ b/angular/src/app/account/account.component.ts
@@ -19,6 +19,7 @@ export class AccountComponent {
       nameFirst: ['', [Validators.required, Validators.minLength(3)]],
       email: ['', [Validators.required, Validators.pattern(/^[a-zA-Z0-9._%+-]+$/)]],
       address: ['', [Validators.required, Validators.minLength(10)]],
+      codePostal: ['', [Validators.required, Validators.minLength(4), Validators.pattern(/^0-9$/)]],
     }); 
   }
 
diff --git a/angular/src/styles.css b/angular/src/styles.css
index 1ba49e4..473dcd0 100644
--- a/angular/src/styles.css
+++ b/angular/src/styles.css
@@ -10,6 +10,10 @@
     padding-bottom: 2px !important;
 }
 
+.fs-20 {
+    width: 5vw;
+}
+
 .breakWord {
     word-break: break-word;
     word-wrap: break-word;