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

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
             }
           ]
         },

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>