Task/migrate historical market data editor dialog from ngModel to form control (#7933)

* Migrate from ngModel to form control

* Update changelog

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Extended the net performance on the analysis page to include the dividends (experimental)
 - Extended the net performance in the portfolio summary to include the dividends (experimental)
 - Improved the get quotes functionality of the _Manual_ service
+- Migrated the historical market data editor dialog from `ngModel` to form control
 - Migrated the _ESLint_ configuration to the flat config format without `FlatCompat`
 - Upgraded `chartjs-chart-treemap` from version `4.2.0` to `4.2.2`
 

libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor-dialog/historical-market-data-editor-dialog.component.ts

@@ -7,11 +7,15 @@ import {
   CUSTOM_ELEMENTS_SCHEMA,
   DestroyRef,
   OnInit,
-  inject,
-  signal
+  inject
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import {
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators
+} from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -33,7 +37,6 @@ import { HistoricalMarketDataEditorDialogParams } from './interfaces/interfaces'
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'h-100' },
   imports: [
-    FormsModule,
     IonIcon,
     MatButtonModule,
     MatDatepickerModule,
@@ -51,7 +54,10 @@ export class GfHistoricalMarketDataEditorDialogComponent implements OnInit {
   public readonly data =
     inject<HistoricalMarketDataEditorDialogParams>(MAT_DIALOG_DATA);
 
-  protected readonly marketPrice = signal(this.data.marketPrice);
+  protected readonly historicalMarketDataForm = new FormGroup({
+    date: new FormControl({ disabled: true, value: this.data.dateString }),
+    marketPrice: new FormControl(this.data.marketPrice, Validators.required)
+  });
 
   private readonly destroyRef = inject(DestroyRef);
   private readonly locale =
@@ -84,14 +90,19 @@ export class GfHistoricalMarketDataEditorDialogComponent implements OnInit {
       })
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(({ marketPrice }) => {
-        this.marketPrice.set(marketPrice);
+        this.historicalMarketDataForm.controls.marketPrice.setValue(
+          marketPrice
+        );
+
+        this.historicalMarketDataForm.controls.marketPrice.markAsDirty();
 
         this.changeDetectorRef.markForCheck();
       });
   }
 
   public onUpdate() {
-    const marketPrice = this.marketPrice();
+    const marketPrice =
+      this.historicalMarketDataForm.controls.marketPrice.value;
 
     if (isNil(marketPrice)) {
       return;

libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor-dialog/historical-market-data-editor-dialog.html

@@ -1,16 +1,14 @@
-<form class="d-flex flex-column h-100">
+<form
+  class="d-flex flex-column h-100"
+  [formGroup]="historicalMarketDataForm"
+  (ngSubmit)="onUpdate()"
+>
   <h1 i18n mat-dialog-title>Details for {{ data.symbol }}</h1>
   <div class="flex-grow-1 py-3" mat-dialog-content>
     <div class="mb-3">
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Date</mat-label>
-        <input
-          disabled
-          matInput
-          name="date"
-          [matDatepicker]="date"
-          [(ngModel)]="data.dateString"
-        />
+        <input formControlName="date" matInput [matDatepicker]="date" />
         <mat-datepicker-toggle class="mr-2" matSuffix [for]="date">
           <ion-icon
             class="text-muted"
@@ -24,13 +22,7 @@
     <div class="align-items-start d-flex">
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Market Price</mat-label>
-        <input
-          matInput
-          name="marketPrice"
-          type="number"
-          [ngModel]="marketPrice()"
-          (ngModelChange)="marketPrice.set($event)"
-        />
+        <input formControlName="marketPrice" matInput type="number" />
         <span class="ml-2" matTextSuffix>{{ data.currency }}</span>
       </mat-form-field>
       <button
@@ -38,6 +30,7 @@
         i18n-title
         mat-button
         title="Fetch market price"
+        type="button"
         (click)="onFetchSymbolForDate()"
       >
         <ion-icon class="text-muted" name="refresh-outline" />
@@ -45,8 +38,15 @@
     </div>
   </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 i18n mat-button type="button" (click)="onCancel()">Cancel</button>
+    <button
+      color="primary"
+      mat-flat-button
+      type="submit"
+      [disabled]="
+        !(historicalMarketDataForm.dirty && historicalMarketDataForm.valid)
+      "
+    >
       <ng-container i18n>Save</ng-container>
     </button>
   </div>