From ea469b7613f1af09c141b78d1a009b72289a9fed Mon Sep 17 00:00:00 2001
From: Sigmabrogz <sigmabrogz@github.com>
Date: Sat, 7 Mar 2026 19:53:51 +0000
Subject: [PATCH] feat: migrate historical market data editor to form control

Implements #6488

- Migrated historical market data editor from ngModel to ReactiveFormsModule
- Disabled Save button when the form is not dirty
---
 ...orical-market-data-editor-dialog.component.ts | 16 +++++++++++-----
 .../historical-market-data-editor-dialog.html    | 14 +++++++++-----
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor-dialog/historical-market-data-editor-dialog.component.ts b/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor-dialog/historical-market-data-editor-dialog.component.ts
index 3e5e3b2e9..dc930732d 100644
--- a/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor-dialog/historical-market-data-editor-dialog.component.ts
+++ b/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor-dialog/historical-market-data-editor-dialog.component.ts
@@ -11,7 +11,7 @@ import {
   signal
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -50,7 +50,10 @@ export class GfHistoricalMarketDataEditorDialogComponent implements OnInit {
   public readonly data =
     inject<HistoricalMarketDataEditorDialogParams>(MAT_DIALOG_DATA);
 
-  protected readonly marketPrice = signal(this.data.marketPrice);
+  public readonly form = new FormGroup({
+    dateString: new FormControl<string | null>({ value: this.data.dateString, disabled: true }),
+    marketPrice: new FormControl<number | undefined>(this.data.marketPrice)
+  });
 
   private readonly destroyRef = inject(DestroyRef);
   private readonly locale =
@@ -83,14 +86,17 @@ export class GfHistoricalMarketDataEditorDialogComponent implements OnInit {
       })
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(({ marketPrice }) => {
-        this.marketPrice.set(marketPrice);
+        this.form.controls.marketPrice.setValue(marketPrice);
+        this.form.controls.marketPrice.markAsDirty();
 
         this.changeDetectorRef.markForCheck();
       });
   }
 
   public onUpdate() {
-    if (this.marketPrice() === undefined) {
+    const marketPrice = this.form.controls.marketPrice.value;
+
+    if (marketPrice === undefined || marketPrice === null) {
       return;
     }
 
@@ -101,7 +107,7 @@ export class GfHistoricalMarketDataEditorDialogComponent implements OnInit {
           marketData: [
             {
               date: this.data.dateString,
-              marketPrice: this.marketPrice()
+              marketPrice: marketPrice
             }
           ]
         },
diff --git a/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor-dialog/historical-market-data-editor-dialog.html b/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor-dialog/historical-market-data-editor-dialog.html
index 7bb5827ef..eadcc33c7 100644
--- a/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor-dialog/historical-market-data-editor-dialog.html
+++ b/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor-dialog/historical-market-data-editor-dialog.html
@@ -1,4 +1,4 @@
-<form class="d-flex flex-column h-100">
+<form class="d-flex flex-column h-100" [formGroup]="form">
   <h1 i18n mat-dialog-title>Details for {{ data.symbol }}</h1>
   <div class="flex-grow-1 py-3" mat-dialog-content>
     <div class="mb-3">
@@ -9,7 +9,7 @@
           matInput
           name="date"
           [matDatepicker]="date"
-          [(ngModel)]="data.dateString"
+          formControlName="dateString"
         />
         <mat-datepicker-toggle class="mr-2" matSuffix [for]="date">
           <ion-icon
@@ -28,8 +28,7 @@
           matInput
           name="marketPrice"
           type="number"
-          [ngModel]="marketPrice()"
-          (ngModelChange)="marketPrice.set($event)"
+          formControlName="marketPrice"
         />
         <span class="ml-2" matTextSuffix>{{ data.currency }}</span>
       </mat-form-field>
@@ -45,7 +44,12 @@
   </div>
   <div class="justify-content-end" mat-dialog-actions>
     <button i18n mat-button (click)="onCancel()">Cancel</button>
-    <button color="primary" mat-flat-button (click)="onUpdate()">
+    <button
+      color="primary"
+      mat-flat-button
+      [disabled]="!form.dirty"
+      (click)="onUpdate()"
+    >
       <ng-container i18n>Save</ng-container>
     </button>
   </div>