DM-414: Base dialog change detection

src/lib/dialog/base-dialog.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Directive, HostListener, inject, OnDestroy } from '@angular/core';
+import { AfterViewInit, Directive, HostListener, inject, OnDestroy, signal } from '@angular/core';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { hasFormChanged, IqserEventTarget } from '../utils';
@@ -28,12 +28,7 @@ export abstract class BaseDialogComponent implements AfterViewInit, OnDestroy {
     protected readonly _subscriptions: Subscription = new Subscription();
     readonly #confirmationDialogService = inject(ConfirmationDialogService);
     readonly #dialog = inject(MatDialog);
-    #hasErrors = false;
-
-    protected constructor(
-        protected readonly _dialogRef: MatDialogRef<BaseDialogComponent>,
-        private readonly _isInEditMode = false,
-    ) {}
+    readonly #hasErrors = signal(true);
 
     get valid(): boolean {
         return !this.form || this.form.valid;
@@ -44,16 +39,23 @@ export abstract class BaseDialogComponent implements AfterViewInit, OnDestroy {
     }
 
     get disabled(): boolean {
-        return !this.valid || !this.changed || this.#hasErrors;
+        return !this.valid || !this.changed || this.#hasErrors();
     }
 
+    protected constructor(
+        protected readonly _dialogRef: MatDialogRef<BaseDialogComponent>,
+        private readonly _isInEditMode = false,
+    ) {}
+
     ngAfterViewInit() {
         this._subscriptions.add(this._dialogRef.backdropClick().subscribe(() => this.close()));
         const valueChanges = this.form?.valueChanges ?? of(null);
         const events = [fromEvent(window, 'keyup'), fromEvent(window, 'input'), valueChanges];
         const events$ = merge(...events).pipe(
             debounceTime(10),
-            tap(() => (this.#hasErrors = !!document.getElementsByClassName('ng-invalid')[0])),
+            tap(() => {
+                this.#hasErrors.set(!!document.getElementsByClassName('ng-invalid')[0]);
+            }),
         );
         this._subscriptions.add(events$.subscribe());
     }