From 06001424cea6f316b4b3b7bd40cde8aa3ff9ce0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ai-chan-0411=20=28=E8=97=8D=29?= <aoikabu12@gmail.com>
Date: Thu, 16 Apr 2026 10:32:47 +0900
Subject: [PATCH] fix(rule-settings-dialog): disable Save button until form is
 modified

The Save button was always enabled on open, even before a user interacted
with the threshold sliders. Migrated from ngModel/FormsModule to
FormGroup/ReactiveFormsModule so the form dirty state can be tracked.
The Save button is now disabled when the form is pristine (no changes made).
---
 .../rule-settings-dialog.component.ts         |  18 +-
 .../rule-settings-dialog.html                 | 265 +++++++++---------
 2 files changed, 147 insertions(+), 136 deletions(-)

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..7fd615e64 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
@@ -3,7 +3,7 @@ import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import { CommonModule } from '@angular/common';
 import { Component, Inject } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import {
   MAT_DIALOG_DATA,
@@ -17,21 +17,31 @@ 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 settingsForm = new FormGroup({
+    thresholdMax: new FormControl(this.data.settings?.thresholdMax ?? null),
+    thresholdMin: new FormControl(this.data.settings?.thresholdMin ?? null)
+  });
 
   public constructor(
     @Inject(MAT_DIALOG_DATA) public data: RuleSettingsDialogParams,
     public dialogRef: MatDialogRef<GfRuleSettingsDialogComponent>
   ) {}
+
+  public onSave() {
+    this.dialogRef.close({
+      ...this.data.settings,
+      ...this.settingsForm.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..9db5feb57 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
@@ -1,138 +1,139 @@
 <div mat-dialog-title>{{ data.categoryName }} › {{ data.rule.name }}</div>
 
-<div class="py-3" mat-dialog-content>
-  @if (
-    data.rule.configuration.thresholdMin && data.rule.configuration.thresholdMax
-  ) {
-    <div class="w-100">
-      <h6 class="d-flex mb-0">
-        <ng-container i18n>Threshold range</ng-container>:
-        <gf-value
-          class="ml-1"
-          [isPercent]="data.rule.configuration.threshold.unit === '%'"
-          [locale]="data.locale"
-          [precision]="2"
-          [value]="data.settings.thresholdMin"
-        />
-        <span class="mx-1">-</span>
-        <gf-value
-          [isPercent]="data.rule.configuration.threshold.unit === '%'"
-          [locale]="data.locale"
-          [precision]="2"
-          [value]="data.settings.thresholdMax"
-        />
-      </h6>
-      <div class="align-items-center d-flex w-100">
-        <gf-value
-          [isPercent]="data.rule.configuration.threshold.unit === '%'"
-          [locale]="data.locale"
-          [precision]="2"
-          [value]="data.rule.configuration.threshold.min"
-        />
-        <mat-slider
-          class="flex-grow-1"
-          [max]="data.rule.configuration.threshold.max"
-          [min]="data.rule.configuration.threshold.min"
-          [step]="data.rule.configuration.threshold.step"
-        >
-          <input matSliderStartThumb [(ngModel)]="data.settings.thresholdMin" />
-          <input matSliderEndThumb [(ngModel)]="data.settings.thresholdMax" />
-        </mat-slider>
-        <gf-value
-          [isPercent]="data.rule.configuration.threshold.unit === '%'"
-          [locale]="data.locale"
-          [precision]="2"
-          [value]="data.rule.configuration.threshold.max"
-        />
+<form [formGroup]="settingsForm">
+  <div class="py-3" mat-dialog-content>
+    @if (
+      data.rule.configuration.thresholdMin && data.rule.configuration.thresholdMax
+    ) {
+      <div class="w-100">
+        <h6 class="d-flex mb-0">
+          <ng-container i18n>Threshold range</ng-container>:
+          <gf-value
+            class="ml-1"
+            [isPercent]="data.rule.configuration.threshold.unit === '%'"
+            [locale]="data.locale"
+            [precision]="2"
+            [value]="settingsForm.controls.thresholdMin.value"
+          />
+          <span class="mx-1">-</span>
+          <gf-value
+            [isPercent]="data.rule.configuration.threshold.unit === '%'"
+            [locale]="data.locale"
+            [precision]="2"
+            [value]="settingsForm.controls.thresholdMax.value"
+          />
+        </h6>
+        <div class="align-items-center d-flex w-100">
+          <gf-value
+            [isPercent]="data.rule.configuration.threshold.unit === '%'"
+            [locale]="data.locale"
+            [precision]="2"
+            [value]="data.rule.configuration.threshold.min"
+          />
+          <mat-slider
+            class="flex-grow-1"
+            [max]="data.rule.configuration.threshold.max"
+            [min]="data.rule.configuration.threshold.min"
+            [step]="data.rule.configuration.threshold.step"
+          >
+            <input formControlName="thresholdMin" matSliderStartThumb />
+            <input formControlName="thresholdMax" matSliderEndThumb />
+          </mat-slider>
+          <gf-value
+            [isPercent]="data.rule.configuration.threshold.unit === '%'"
+            [locale]="data.locale"
+            [precision]="2"
+            [value]="data.rule.configuration.threshold.max"
+          />
+        </div>
       </div>
-    </div>
-  } @else {
-    <div
-      class="w-100"
-      [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMin }"
-    >
-      <h6 class="d-flex mb-0">
-        <ng-container i18n>Threshold Min</ng-container>:
-        <gf-value
-          class="ml-1"
-          [isPercent]="data.rule.configuration.threshold.unit === '%'"
-          [locale]="data.locale"
-          [precision]="2"
-          [value]="data.settings.thresholdMin"
-        />
-      </h6>
-      <div class="align-items-center d-flex w-100">
-        <gf-value
-          [isPercent]="data.rule.configuration.threshold.unit === '%'"
-          [locale]="data.locale"
-          [precision]="2"
-          [value]="data.rule.configuration.threshold.min"
-        />
-        <mat-slider
-          class="flex-grow-1"
-          name="thresholdMin"
-          [max]="data.rule.configuration.threshold.max"
-          [min]="data.rule.configuration.threshold.min"
-          [step]="data.rule.configuration.threshold.step"
-        >
-          <input matSliderThumb [(ngModel)]="data.settings.thresholdMin" />
-        </mat-slider>
-        <gf-value
-          [isPercent]="data.rule.configuration.threshold.unit === '%'"
-          [locale]="data.locale"
-          [precision]="2"
-          [value]="data.rule.configuration.threshold.max"
-        />
+    } @else {
+      <div
+        class="w-100"
+        [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMin }"
+      >
+        <h6 class="d-flex mb-0">
+          <ng-container i18n>Threshold Min</ng-container>:
+          <gf-value
+            class="ml-1"
+            [isPercent]="data.rule.configuration.threshold.unit === '%'"
+            [locale]="data.locale"
+            [precision]="2"
+            [value]="settingsForm.controls.thresholdMin.value"
+          />
+        </h6>
+        <div class="align-items-center d-flex w-100">
+          <gf-value
+            [isPercent]="data.rule.configuration.threshold.unit === '%'"
+            [locale]="data.locale"
+            [precision]="2"
+            [value]="data.rule.configuration.threshold.min"
+          />
+          <mat-slider
+            class="flex-grow-1"
+            [max]="data.rule.configuration.threshold.max"
+            [min]="data.rule.configuration.threshold.min"
+            [step]="data.rule.configuration.threshold.step"
+          >
+            <input formControlName="thresholdMin" matSliderThumb />
+          </mat-slider>
+          <gf-value
+            [isPercent]="data.rule.configuration.threshold.unit === '%'"
+            [locale]="data.locale"
+            [precision]="2"
+            [value]="data.rule.configuration.threshold.max"
+          />
+        </div>
       </div>
-    </div>
-    <div
-      class="w-100"
-      [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMax }"
-    >
-      <h6 class="d-flex mb-0">
-        <ng-container i18n>Threshold Max</ng-container>:
-        <gf-value
-          class="ml-1"
-          [isPercent]="data.rule.configuration.threshold.unit === '%'"
-          [locale]="data.locale"
-          [precision]="2"
-          [value]="data.settings.thresholdMax"
-        />
-      </h6>
-      <div class="align-items-center d-flex w-100">
-        <gf-value
-          [isPercent]="data.rule.configuration.threshold.unit === '%'"
-          [locale]="data.locale"
-          [precision]="2"
-          [value]="data.rule.configuration.threshold.min"
-        />
-        <mat-slider
-          class="flex-grow-1"
-          name="thresholdMax"
-          [max]="data.rule.configuration.threshold.max"
-          [min]="data.rule.configuration.threshold.min"
-          [step]="data.rule.configuration.threshold.step"
-        >
-          <input matSliderThumb [(ngModel)]="data.settings.thresholdMax" />
-        </mat-slider>
-        <gf-value
-          [isPercent]="data.rule.configuration.threshold.unit === '%'"
-          [locale]="data.locale"
-          [precision]="2"
-          [value]="data.rule.configuration.threshold.max"
-        />
+      <div
+        class="w-100"
+        [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMax }"
+      >
+        <h6 class="d-flex mb-0">
+          <ng-container i18n>Threshold Max</ng-container>:
+          <gf-value
+            class="ml-1"
+            [isPercent]="data.rule.configuration.threshold.unit === '%'"
+            [locale]="data.locale"
+            [precision]="2"
+            [value]="settingsForm.controls.thresholdMax.value"
+          />
+        </h6>
+        <div class="align-items-center d-flex w-100">
+          <gf-value
+            [isPercent]="data.rule.configuration.threshold.unit === '%'"
+            [locale]="data.locale"
+            [precision]="2"
+            [value]="data.rule.configuration.threshold.min"
+          />
+          <mat-slider
+            class="flex-grow-1"
+            [max]="data.rule.configuration.threshold.max"
+            [min]="data.rule.configuration.threshold.min"
+            [step]="data.rule.configuration.threshold.step"
+          >
+            <input formControlName="thresholdMax" matSliderThumb />
+          </mat-slider>
+          <gf-value
+            [isPercent]="data.rule.configuration.threshold.unit === '%'"
+            [locale]="data.locale"
+            [precision]="2"
+            [value]="data.rule.configuration.threshold.max"
+          />
+        </div>
       </div>
-    </div>
-  }
-</div>
+    }
+  </div>
 
-<div align="end" mat-dialog-actions>
-  <button i18n mat-button (click)="dialogRef.close()">Close</button>
-  <button
-    color="primary"
-    mat-flat-button
-    (click)="dialogRef.close(data.settings)"
-  >
-    <ng-container i18n>Save</ng-container>
-  </button>
-</div>
+  <div align="end" mat-dialog-actions>
+    <button i18n mat-button (click)="dialogRef.close()">Close</button>
+    <button
+      color="primary"
+      mat-flat-button
+      [disabled]="settingsForm.pristine"
+      (click)="onSave()"
+    >
+      <ng-container i18n>Save</ng-container>
+    </button>
+  </div>
+</form>