From d7e6b326c8effa1ff3eb1d39e07742296f5d9c8c Mon Sep 17 00:00:00 2001
From: mailtoboggavarapu-coder <mailtoboggavarapu@gmail.com>
Date: Mon, 20 Apr 2026 11:24:37 -0400
Subject: [PATCH] fix: update rule-settings-dialog template for reactive forms

---
 .../rule-settings-dialog/rule-settings-dialog.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

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..5785f8e65 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,6 +1,6 @@
-<div mat-dialog-title>{{ data.categoryName }} › {{ data.rule.name }}</div>
+<div mat-dialog-title>{{ data.categoryName }} › {{ data.rule.name }}</div>
 
-<div class="py-3" mat-dialog-content>
+<div class="py-3" mat-dialog-content [formGroup]="settingsForm">
   @if (
     data.rule.configuration.thresholdMin && data.rule.configuration.thresholdMax
   ) {
@@ -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 formControlName="thresholdMin" />
+          <input matSliderEndThumb formControlName="thresholdMax" />
         </mat-slider>
         <gf-value
           [isPercent]="data.rule.configuration.threshold.unit === '%'"
@@ -75,7 +75,7 @@
           [min]="data.rule.configuration.threshold.min"
           [step]="data.rule.configuration.threshold.step"
         >
-          <input matSliderThumb [(ngModel)]="data.settings.thresholdMin" />
+          <input matSliderThumb formControlName="thresholdMin" />
         </mat-slider>
         <gf-value
           [isPercent]="data.rule.configuration.threshold.unit === '%'"
@@ -113,7 +113,7 @@
           [min]="data.rule.configuration.threshold.min"
           [step]="data.rule.configuration.threshold.step"
         >
-          <input matSliderThumb [(ngModel)]="data.settings.thresholdMax" />
+          <input matSliderThumb formControlName="thresholdMax" />
         </mat-slider>
         <gf-value
           [isPercent]="data.rule.configuration.threshold.unit === '%'"
@@ -131,7 +131,7 @@
   <button
     color="primary"
     mat-flat-button
-    (click)="dialogRef.close(data.settings)"
+    [disabled]="!settingsForm.dirty" (click)="dialogRef.close(updatedSettings)"
   >
     <ng-container i18n>Save</ng-container>
   </button>