Fix Save button state in rule settings dialog #6479

CHANGELOG.md

@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Upgraded `Nx` from version `22.4.5` to `22.5.3`
 
+### Fixed
+
+- Fixed the _Save_ button state in the rule settings dialog on the _X-ray_ page
+
 ## 2.245.0 - 2026-03-01
 
 ### Changed

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 { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import {
   MAT_DIALOG_DATA,
@@ -17,7 +17,7 @@ import { RuleSettingsDialogParams } from './interfaces/interfaces';
 @Component({
   imports: [
     CommonModule,
-    FormsModule,
+    ReactiveFormsModule,
     GfValueComponent,
     MatButtonModule,
     MatDialogModule,
@@ -29,9 +29,23 @@ import { RuleSettingsDialogParams } from './interfaces/interfaces';
 })
 export class GfRuleSettingsDialogComponent {
   public settings: XRayRulesSettings['AccountClusterRiskCurrentInvestment'];
+  public form: FormGroup;
 
   public constructor(
     @Inject(MAT_DIALOG_DATA) public data: RuleSettingsDialogParams,
-    public dialogRef: MatDialogRef<GfRuleSettingsDialogComponent>
-  ) {}
+    public dialogRef: MatDialogRef<GfRuleSettingsDialogComponent>,
+    private formBuilder: FormBuilder
+  ) {
+    this.form = this.formBuilder.group({
+      thresholdMax: [this.data.settings?.thresholdMax],
+      thresholdMin: [this.data.settings?.thresholdMin]
+    });
+  }
+
+  public onSave() {
+    this.dialogRef.close({
+      ...this.data.settings,
+      ...this.form.value
+    });
+  }
 }

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

@@ -1,8 +1,10 @@
 <div mat-dialog-title>{{ data.categoryName }} › {{ data.rule.name }}</div>
 
-<div class="py-3" mat-dialog-content>
+<form class="d-flex flex-column h-100" [formGroup]="form" (ngSubmit)="onSave()">
+  <div class="py-3" mat-dialog-content>
     @if (
-    data.rule.configuration.thresholdMin && data.rule.configuration.thresholdMax
+      data.rule.configuration.thresholdMin &&
+      data.rule.configuration.thresholdMax
     ) {
       <div class="w-100">
         <h6 class="d-flex mb-0">
@@ -12,14 +14,14 @@
             [isPercent]="data.rule.configuration.threshold.unit === '%'"
             [locale]="data.locale"
             [precision]="2"
-          [value]="data.settings.thresholdMin"
+            [value]="form.value.thresholdMin"
           />
           <span class="mx-1">-</span>
           <gf-value
             [isPercent]="data.rule.configuration.threshold.unit === '%'"
             [locale]="data.locale"
             [precision]="2"
-          [value]="data.settings.thresholdMax"
+            [value]="form.value.thresholdMax"
           />
         </h6>
         <div class="align-items-center d-flex w-100">
@@ -35,8 +37,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 +60,7 @@
             [isPercent]="data.rule.configuration.threshold.unit === '%'"
             [locale]="data.locale"
             [precision]="2"
-          [value]="data.settings.thresholdMin"
+            [value]="form.value.thresholdMin"
           />
         </h6>
         <div class="align-items-center d-flex w-100">
@@ -75,7 +77,7 @@
             [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 +98,7 @@
             [isPercent]="data.rule.configuration.threshold.unit === '%'"
             [locale]="data.locale"
             [precision]="2"
-          [value]="data.settings.thresholdMax"
+            [value]="form.value.thresholdMax"
           />
         </h6>
         <div class="align-items-center d-flex w-100">
@@ -113,7 +115,7 @@
             [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 === '%'"
@@ -124,15 +126,19 @@
         </div>
       </div>
     }
-</div>
+  </div>
 
-<div align="end" mat-dialog-actions>
-  <button i18n mat-button (click)="dialogRef.close()">Close</button>
+  <div align="end" mat-dialog-actions>
+    <button i18n mat-button type="button" (click)="dialogRef.close()">
+      Close
+    </button>
     <button
       color="primary"
       mat-flat-button
-    (click)="dialogRef.close(data.settings)"
+      type="submit"
+      [disabled]="!(form.dirty && form.valid)"
     >
       <ng-container i18n>Save</ng-container>
     </button>
-</div>
+  </div>
+</form>