Merge 1b7e7d9652 into ba15da695b

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,
+  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';
@@ -25,6 +29,7 @@ import { MatInputModule } from '@angular/material/input';
 import { IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { calendarClearOutline, refreshOutline } from 'ionicons/icons';
+import { isNil } from 'lodash';
 
 import { HistoricalMarketDataEditorDialogParams } from './interfaces/interfaces';
 
@@ -50,7 +55,13 @@ 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 +94,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 (isNil(marketPrice)) {
       return;
     }
 
@@ -100,8 +114,8 @@ export class GfHistoricalMarketDataEditorDialogComponent implements OnInit {
         marketData: {
           marketData: [
             {
-              date: this.data.dateString,
-              marketPrice: this.marketPrice()
+              marketPrice,
+              date: this.data.dateString
             }
           ]
         },

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">
@@ -6,10 +6,10 @@
         <mat-label i18n>Date</mat-label>
         <input
           disabled
+          formControlName="dateString"
           matInput
           name="date"
           [matDatepicker]="date"
-          [(ngModel)]="data.dateString"
         />
         <mat-datepicker-toggle class="mr-2" matSuffix [for]="date">
           <ion-icon
@@ -25,11 +25,10 @@
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Market Price</mat-label>
         <input
+          formControlName="marketPrice"
           matInput
           name="marketPrice"
           type="number"
-          [ngModel]="marketPrice()"
-          (ngModelChange)="marketPrice.set($event)"
         />
         <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 && form.valid)"
+      (click)="onUpdate()"
+    >
       <ng-container i18n>Save</ng-container>
     </button>
   </div>