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).

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
+    });
+  }
 }

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

@@ -1,5 +1,6 @@
 <div mat-dialog-title>{{ data.categoryName }} › {{ data.rule.name }}</div>
 
+<form [formGroup]="settingsForm">
   <div class="py-3" mat-dialog-content>
     @if (
       data.rule.configuration.thresholdMin && data.rule.configuration.thresholdMax
@@ -12,14 +13,14 @@
             [isPercent]="data.rule.configuration.threshold.unit === '%'"
             [locale]="data.locale"
             [precision]="2"
-          [value]="data.settings.thresholdMin"
+            [value]="settingsForm.controls.thresholdMin.value"
           />
           <span class="mx-1">-</span>
           <gf-value
             [isPercent]="data.rule.configuration.threshold.unit === '%'"
             [locale]="data.locale"
             [precision]="2"
-          [value]="data.settings.thresholdMax"
+            [value]="settingsForm.controls.thresholdMax.value"
           />
         </h6>
         <div class="align-items-center d-flex w-100">
@@ -35,8 +36,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 formControlName="thresholdMin" matSliderStartThumb />
+            <input formControlName="thresholdMax" matSliderEndThumb />
           </mat-slider>
           <gf-value
             [isPercent]="data.rule.configuration.threshold.unit === '%'"
@@ -58,7 +59,7 @@
             [isPercent]="data.rule.configuration.threshold.unit === '%'"
             [locale]="data.locale"
             [precision]="2"
-          [value]="data.settings.thresholdMin"
+            [value]="settingsForm.controls.thresholdMin.value"
           />
         </h6>
         <div class="align-items-center d-flex w-100">
@@ -70,12 +71,11 @@
           />
           <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" />
+            <input formControlName="thresholdMin" matSliderThumb />
           </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]="settingsForm.controls.thresholdMax.value"
           />
         </h6>
         <div class="align-items-center d-flex w-100">
@@ -108,12 +108,11 @@
           />
           <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" />
+            <input formControlName="thresholdMax" matSliderThumb />
           </mat-slider>
           <gf-value
             [isPercent]="data.rule.configuration.threshold.unit === '%'"
@@ -131,8 +130,10 @@
     <button
       color="primary"
       mat-flat-button
-    (click)="dialogRef.close(data.settings)"
+      [disabled]="settingsForm.pristine"
+      (click)="onSave()"
     >
       <ng-container i18n>Save</ng-container>
     </button>
   </div>
+</form>