🦺 Validate fields Titre/Localisation/Description on edit modal

src/app/components/edit-pin-popup/edit-pin-popup.component.html

@@ -97,6 +97,10 @@ aria-label="Edit"
                 placeholder="Mont Saint-Michel"
                 required
               />
+              <div *ngIf="form.get('title')?.invalid && form.get('title')?.touched" class="text-red-500 text-sm mt-1">
+                <span *ngIf="form.get('title')?.errors?.['required']">Le titre est requis</span>
+                <span *ngIf="form.get('title')?.errors?.['minlength']">Le titre doit contenir au moins 3 caractères</span>
+              </div>
             </div>
 
             <div>
@@ -114,6 +118,9 @@ aria-label="Edit"
                 (focus)="onFocus()"
                 (blur)="onBlur()"
               />
+              <div *ngIf="form.get('location')?.invalid && form.get('location')?.touched" class="text-red-500 text-sm mt-1">
+                <span *ngIf="form.get('location')?.errors?.['required']">La localisation est requise</span>
+              </div>
               <ul
                 *ngIf="suggestions.length > 0 && inputFocused"
                 class="bg-white dark:bg-gray-700 border border-gray-300 mt-2 rounded shadow absolute z-10 mr-5 max-h-60 overflow-auto"
@@ -156,6 +163,10 @@ aria-label="Edit"
                 class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                 placeholder="Décrit ton souvenir..."
               ></textarea>
+              <div *ngIf="form.get('description')?.invalid && form.get('description')?.touched" class="text-red-500 text-sm mt-1">
+                <span *ngIf="form.get('description')?.errors?.['required']">La description est requise</span>
+                <span *ngIf="form.get('description')?.errors?.['minlength']">La description doit contenir au moins 3 caractères</span>
+              </div>
             </div>
 
             <div>

src/app/components/edit-pin-popup/edit-pin-popup.component.ts

@@ -12,6 +12,7 @@ import {
   FormControl,
   FormGroup,
   ReactiveFormsModule,
+  Validators,
 } from '@angular/forms';
 import { NavigationEnd, Router } from '@angular/router';
 import { forkJoin, of, Subscription } from 'rxjs';
@@ -68,10 +69,10 @@ export class EditPinPopupComponent implements OnInit, OnDestroy {
   ) {
     // Initialiser le formulaire avec des valeurs par défaut
     this.form = this.fb.group({
-      title: new FormControl(''),
-      description: new FormControl(''),
-      location: new FormControl(''),
-      complete_address: new FormControl(''),
+      title: new FormControl('', [Validators.required, Validators.minLength(3)]),
+      description: new FormControl('', [Validators.required, Validators.minLength(3)]),
+      location: new FormControl('', [Validators.required]),
+      complete_address: new FormControl('', [Validators.required]),
       coordinates: new FormControl<number[]>([]),
       files: new FormControl(null),
       date: new FormControl(''),