fix: disable Save button until form is dirty in rule settings dialog (Fixes #6479)

apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.component.ts

@@ -1,9 +1,8 @@
-import { XRayRulesSettings } from '@ghostfolio/common/interfaces';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import { CommonModule } from '@angular/common';
 import { Component, Inject } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import {
   MAT_DIALOG_DATA,
@@ -17,21 +16,33 @@ import { RuleSettingsDialogParams } from './interfaces/interfaces';
 @Component({
   imports: [
     CommonModule,
-    FormsModule,
     GfValueComponent,
     MatButtonModule,
     MatDialogModule,
-    MatSliderModule
+    MatSliderModule,
+    ReactiveFormsModule
   ],
   selector: 'gf-rule-settings-dialog',
   styleUrls: ['./rule-settings-dialog.scss'],
   templateUrl: './rule-settings-dialog.html'
 })
 export class GfRuleSettingsDialogComponent {
-  public settings: XRayRulesSettings['AccountClusterRiskCurrentInvestment'];
+  public thresholdMaxFormControl = new FormControl<number>(
+    this.data.settings.thresholdMax
+  );
+  public thresholdMinFormControl = new FormControl<number>(
+    this.data.settings.thresholdMin
+  );
 
   public constructor(
     @Inject(MAT_DIALOG_DATA) public data: RuleSettingsDialogParams,
     public dialogRef: MatDialogRef<GfRuleSettingsDialogComponent>
   ) {}
+
+  public onSave() {
+    this.dialogRef.close({
+      thresholdMax: this.thresholdMaxFormControl.value,
+      thresholdMin: this.thresholdMinFormControl.value
+    });
+  }
 }

apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html

@@ -12,14 +12,14 @@
           [isPercent]="data.rule.configuration.threshold.unit === '%'"
           [locale]="data.locale"
           [precision]="2"
-          [value]="data.settings.thresholdMin"
+          [value]="thresholdMinFormControl.value"
         />
         <span class="mx-1">-</span>
         <gf-value
           [isPercent]="data.rule.configuration.threshold.unit === '%'"
           [locale]="data.locale"
           [precision]="2"
-          [value]="data.settings.thresholdMax"
+          [value]="thresholdMaxFormControl.value"
         />
       </h6>
       <div class="align-items-center d-flex w-100">
@@ -35,8 +35,8 @@
           [min]="data.rule.configuration.threshold.min"
           [step]="data.rule.configuration.threshold.step"
         >
-          <input matSliderStartThumb [(ngModel)]="data.settings.thresholdMin" />
+          <input matSliderStartThumb [formControl]="thresholdMinFormControl" />
-          <input matSliderEndThumb [(ngModel)]="data.settings.thresholdMax" />
+          <input matSliderEndThumb [formControl]="thresholdMaxFormControl" />
         </mat-slider>
         <gf-value
           [isPercent]="data.rule.configuration.threshold.unit === '%'"
@@ -58,7 +58,7 @@
           [isPercent]="data.rule.configuration.threshold.unit === '%'"
           [locale]="data.locale"
           [precision]="2"
-          [value]="data.settings.thresholdMin"
+          [value]="thresholdMinFormControl.value"
         />
       </h6>
       <div class="align-items-center d-flex w-100">
@@ -75,7 +75,7 @@
           [min]="data.rule.configuration.threshold.min"
           [step]="data.rule.configuration.threshold.step"
         >
-          <input matSliderThumb [(ngModel)]="data.settings.thresholdMin" />
+          <input matSliderThumb [formControl]="thresholdMinFormControl" />
         </mat-slider>
         <gf-value
           [isPercent]="data.rule.configuration.threshold.unit === '%'"
@@ -96,7 +96,7 @@
           [isPercent]="data.rule.configuration.threshold.unit === '%'"
           [locale]="data.locale"
           [precision]="2"
-          [value]="data.settings.thresholdMax"
+          [value]="thresholdMaxFormControl.value"
         />
       </h6>
       <div class="align-items-center d-flex w-100">
@@ -113,7 +113,7 @@
           [min]="data.rule.configuration.threshold.min"
           [step]="data.rule.configuration.threshold.step"
         >
-          <input matSliderThumb [(ngModel)]="data.settings.thresholdMax" />
+          <input matSliderThumb [formControl]="thresholdMaxFormControl" />
         </mat-slider>
         <gf-value
           [isPercent]="data.rule.configuration.threshold.unit === '%'"
@@ -131,7 +131,10 @@
   <button
     color="primary"
     mat-flat-button
-    (click)="dialogRef.close(data.settings)"
+    [disabled]="
+      !thresholdMinFormControl.dirty && !thresholdMaxFormControl.dirty
+    "
+    (click)="onSave()"
   >
     <ng-container i18n>Save</ng-container>
   </button>