fds

bookie/src/app/guest-book/guest-book-list/guest-book-list.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, computed, effect, signal } from '@angular/core';
+import { Component, inject, computed, effect, input, linkedSignal } from '@angular/core';
 import { form, FormField } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -40,8 +40,21 @@ export class GuestBookListComponent {
   private snackBar = inject(MatSnackBar);
   private ser = inject(GuestBookService);
 
-  formModel = signal<GuestBookListFormData>({
-    date: this.initialDate(),
+  date = input(new Date(), {
+    transform: (v: string | null | undefined): Date => {
+      if (v) {
+        const parsed = moment(v, 'DD-MMM-YYYY', true);
+        if (parsed.isValid()) return parsed.toDate();
+      }
+      return new Date();
+    },
+  });
+
+  formModel = linkedSignal({
+    source: this.date,
+    computation: (d): GuestBookListFormData => ({
+      date: d,
+    }),
   });
 
   form = form(this.formModel);
@@ -65,13 +78,4 @@ export class GuestBookListComponent {
       });
     });
   }
-
-  private initialDate(): Date {
-    const qp = this.route.snapshot.queryParamMap.get('date');
-    if (qp) {
-      const parsed = moment(qp, 'DD-MMM-YYYY', true);
-      if (parsed.isValid()) return parsed.toDate();
-    }
-    return new Date();
-  }
 }