From 02e3e4e30fa9d549a19f783852168dca8f0a471a Mon Sep 17 00:00:00 2001
From: Bortlesboat <bortstheboat@gmail.com>
Date: Sat, 28 Mar 2026 15:25:22 -0400
Subject: [PATCH] fix: disable Save button in rule settings dialog until form
 is dirty

Migrate from ngModel to FormControl so the Save button is disabled
on initialization and only enabled once the user interacts with
the slider controls.

Closes #6479
---
 CHANGELOG.md                                  |  4 +++
 .../rule-settings-dialog.component.ts         | 36 ++++++++++++++++---
 .../rule-settings-dialog.html                 | 19 +++++-----
 3 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6755fa2a7..43d115644 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improved the language localization for Spanish (`es`)
 - Upgraded `countries-list` from version `3.2.2` to `3.3.0`
 
+### Fixed
+
+- Fixed the _Save_ button state in the rule settings dialog of the _X-ray_ section
+
 ## 2.251.0 - 2026-03-24
 
 ### Added
diff --git a/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.component.ts b/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.component.ts
index 65300c6d8..9366a29ff 100644
--- a/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.component.ts
+++ b/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.component.ts
@@ -2,8 +2,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 { Component, Inject, OnInit } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import {
   MAT_DIALOG_DATA,
@@ -17,21 +17,47 @@ 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 {
+export class GfRuleSettingsDialogComponent implements OnInit {
   public settings: XRayRulesSettings['AccountClusterRiskCurrentInvestment'];
+  public thresholdMaxControl: FormControl<number>;
+  public thresholdMinControl: FormControl<number>;
 
   public constructor(
     @Inject(MAT_DIALOG_DATA) public data: RuleSettingsDialogParams,
     public dialogRef: MatDialogRef<GfRuleSettingsDialogComponent>
   ) {}
+
+  public get isDirty(): boolean {
+    return this.thresholdMinControl.dirty || this.thresholdMaxControl.dirty;
+  }
+
+  public ngOnInit() {
+    this.thresholdMinControl = new FormControl<number>(
+      this.data.settings.thresholdMin,
+      { nonNullable: true }
+    );
+
+    this.thresholdMaxControl = new FormControl<number>(
+      this.data.settings.thresholdMax,
+      { nonNullable: true }
+    );
+  }
+
+  public onSave() {
+    this.dialogRef.close({
+      ...this.data.settings,
+      thresholdMax: this.thresholdMaxControl.value,
+      thresholdMin: this.thresholdMinControl.value
+    });
+  }
 }
diff --git a/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html b/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html
index 83d4e2d19..6d1ad25c3 100644
--- a/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html
+++ b/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]="thresholdMinControl.value"
         />
         <span class="mx-1">-</span>
         <gf-value
           [isPercent]="data.rule.configuration.threshold.unit === '%'"
           [locale]="data.locale"
           [precision]="2"
-          [value]="data.settings.thresholdMax"
+          [value]="thresholdMaxControl.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 matSliderEndThumb [(ngModel)]="data.settings.thresholdMax" />
+          <input matSliderStartThumb [formControl]="thresholdMinControl" />
+          <input matSliderEndThumb [formControl]="thresholdMaxControl" />
         </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]="thresholdMinControl.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]="thresholdMinControl" />
         </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]="thresholdMaxControl.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]="thresholdMaxControl" />
         </mat-slider>
         <gf-value
           [isPercent]="data.rule.configuration.threshold.unit === '%'"
@@ -131,7 +131,8 @@
   <button
     color="primary"
     mat-flat-button
-    (click)="dialogRef.close(data.settings)"
+    [disabled]="!isDirty"
+    (click)="onSave()"
   >
     <ng-container i18n>Save</ng-container>
   </button>