The Save button on the Settings page remains inactive if the GA checkbox is selected

modules/ui/src/app/pages/general-settings/general-settings.component.html

@@ -109,7 +109,8 @@
           !isFormValues ||
           vm.isLessThanOneInterface ||
           settingsDisable ||
-          settingForm.pristine
+          (settingForm.pristine &&
+            (analyticsForm.pristine || !optOutHasChanges))
         ">
         Save
       </button>
@@ -171,8 +172,8 @@
     </p>
   </ng-template>
   <ng-template #analyticsData>
-    <p class="setting-data">
-      <mat-checkbox [(ngModel)]="optOut" class="consent-actions-opt-out">
+    <p class="setting-data" [formGroup]="analyticsForm">
+      <mat-checkbox class="consent-actions-opt-out" formControlName="optOut">
         Opt out from Google Analytics
       </mat-checkbox>
     </p>

modules/ui/src/app/pages/general-settings/general-settings.component.ts

@@ -30,7 +30,6 @@ import {
 import { Subject, takeUntil, tap } from 'rxjs';
 import { OnlyDifferentValuesValidator } from './only-different-values.validator';
 import { CalloutType } from '../../model/callout-type';
-import { EventType } from '../../model/event-type';
 import { FormKey, SystemConfig } from '../../model/setting';
 import { GeneralSettingsStore } from './general-settings.store';
 import { LoaderService } from '../../services/loader.service';
@@ -87,7 +86,6 @@ declare const gtag: Function;
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class GeneralSettingsComponent implements OnInit, OnDestroy {
-  optOut = false;
   private readonly fb = inject(FormBuilder);
   private readonly onlyDifferentValuesValidator = inject(
     OnlyDifferentValuesValidator
@@ -108,9 +106,9 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy {
     }
   }
   public readonly CalloutType = CalloutType;
-  public readonly EventType = EventType;
   public readonly FormKey = FormKey;
   public settingForm!: FormGroup;
+  public analyticsForm!: FormGroup;
   public readonly Routes = Routes;
   viewModel$ = this.settingsStore.viewModel$;
 
@@ -149,8 +147,13 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy {
     return this.settingForm.hasError('hasSameValues');
   }
 
+  get optOutHasChanges(): boolean {
+    return this.analyticsForm.value.optOut;
+  }
+
   ngOnInit() {
     this.createSettingForm();
+    this.createAnalyticsForm();
     this.cleanFormErrorMessage();
     this.settingsStore.getInterfaces();
     this.getSystemConfig();
@@ -187,6 +190,7 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy {
     } else {
       this.createSystemConfig();
       this.settingForm.markAsPristine();
+      this.analyticsForm.markAsPristine();
     }
   }
 
@@ -213,6 +217,12 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy {
     );
   }
 
+  private createAnalyticsForm() {
+    this.analyticsForm = this.fb.group({
+      optOut: new FormControl(false),
+    });
+  }
+
   private setDefaultFormValues() {
     this.settingsStore.setDefaultFormValues(this.settingForm);
   }
@@ -244,14 +254,10 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy {
       config: data,
     });
     gtag('consent', 'update', {
-      analytics_storage: this.optOut ? 'denied' : 'granted',
+      analytics_storage: this.analyticsForm.value.optOut ? 'denied' : 'granted',
     });
   }
 
-  private resetForm(): void {
-    this.settingForm.reset();
-  }
-
   ngOnDestroy() {
     this.destroy$.next(true);
     this.destroy$.unsubscribe();