feat: refactor forms to use reactive forms with signals for improved state management

frontend/src/app/components/apartment-form/apartment-form.ts

@@ -1,5 +1,6 @@
 import { Component, effect, input, output, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { FormRoot, FormField, form, required, min } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -10,6 +11,8 @@ import { Apartment } from '../../services/apartment.service';
   selector: 'app-apartment-form',
   imports: [
     FormsModule,
+    FormRoot,
+    FormField,
     MatButtonModule,
     MatFormFieldModule,
     MatInputModule,
@@ -25,10 +28,20 @@ export class ApartmentForm {
   readonly closed = output<void>();
   readonly saved = output<Apartment>();
 
-  readonly name = signal('');
-  readonly address = signal('');
-  readonly purchasePrice = signal(0);
-  readonly description = signal('');
+  readonly apartmentModel = signal<Apartment>({
+    name: '',
+    address: '',
+    purchasePrice: 0,
+    description: '',
+  });
+
+  readonly apartmentForm = form(this.apartmentModel, (f) => {
+    required(f.name, { message: 'Veuillez remplir tous les champs obligatoires (Nom, Adresse, Prix > 0).' });
+    required(f.address, { message: 'Veuillez remplir tous les champs obligatoires (Nom, Adresse, Prix > 0).' });
+    required(f.purchasePrice, { message: 'Veuillez remplir tous les champs obligatoires (Nom, Adresse, Prix > 0).' });
+    min(f.purchasePrice, 1, { message: 'Veuillez remplir tous les champs obligatoires (Nom, Adresse, Prix > 0).' });
+  });
+
   readonly error = signal('');
 
   constructor() {
@@ -37,24 +50,30 @@ export class ApartmentForm {
 
   save(): void {
     if (this.saving()) return;
-    if (!this.name().trim() || !this.address().trim() || this.purchasePrice() <= 0) {
-      this.error.set('Veuillez remplir tous les champs obligatoires (Nom, Adresse, Prix > 0).');
+    this.apartmentForm().markAsTouched();
+    if (this.apartmentForm().invalid()) {
+      const firstError = this.apartmentForm().errorSummary()[0];
+      this.error.set(firstError?.message ?? 'Veuillez corriger les erreurs.');
       return;
     }
 
     this.saved.emit({
-      name: this.name().trim(),
-      address: this.address().trim(),
-      purchasePrice: this.purchasePrice(),
-      description: this.description().trim(),
+      id: this.apartment()?.id,
+      name: this.apartmentModel().name.trim(),
+      address: this.apartmentModel().address.trim(),
+      purchasePrice: this.apartmentModel().purchasePrice,
+      description: this.apartmentModel().description.trim(),
     });
   }
 
   private resetForm(apartment: Apartment | null): void {
-    this.name.set(apartment?.name ?? '');
-    this.address.set(apartment?.address ?? '');
-    this.purchasePrice.set(apartment?.purchasePrice ?? 0);
-    this.description.set(apartment?.description ?? '');
+    this.apartmentModel.set({
+      id: apartment?.id,
+      name: apartment?.name ?? '',
+      address: apartment?.address ?? '',
+      purchasePrice: apartment?.purchasePrice ?? 0,
+      description: apartment?.description ?? '',
+    });
     this.error.set('');
   }
 }