RED-6255, fix autocomplete not marking the form as valid for modals (colors mentioned in the ticket).

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

@@ -1,13 +1,14 @@
-import { Directive, HostListener, inject, OnDestroy } from '@angular/core';
+import { Directive, HostListener, inject, OnDestroy, OnInit } from '@angular/core';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { hasFormChanged, IqserEventTarget } from '../utils';
 import { ConfirmOptions } from '.';
 import { ConfirmationDialogService } from './confirmation-dialog.service';
-import { firstValueFrom } from 'rxjs';
+import { debounceTime, firstValueFrom, from, fromEvent, mergeMap, Subscription } from 'rxjs';
 import { LoadingService } from '../loading';
 import { Toaster } from '../services';
 import { IconButtonTypes } from '../buttons';
+import { tap } from 'rxjs/operators';
 
 const TARGET_NODE = 'mat-dialog-container';
 
@@ -17,7 +18,7 @@ export interface SaveOptions {
 }
 
 @Directive()
-export abstract class BaseDialogComponent implements OnDestroy {
+export abstract class BaseDialogComponent implements OnInit, OnDestroy {
     readonly iconButtonTypes = IconButtonTypes;
     form?: UntypedFormGroup;
     initialFormValue!: Record<string, string>;
@@ -26,13 +27,28 @@ export abstract class BaseDialogComponent implements OnDestroy {
     protected readonly _toaster = inject(Toaster);
     readonly #confirmationDialogService = inject(ConfirmationDialogService);
     readonly #dialog = inject(MatDialog);
+    readonly #subscriptions: Subscription = new Subscription();
     #hasErrors = false;
-    #backdropClickSubscription = this._dialogRef.backdropClick().subscribe(() => {
-        this.close();
-    });
 
     protected constructor(protected readonly _dialogRef: MatDialogRef<BaseDialogComponent>, private readonly _isInEditMode?: boolean) {}
 
+    ngOnInit() {
+        this.#subscriptions.add(
+            this._dialogRef.backdropClick().subscribe(() => {
+                this.close();
+            }),
+        );
+        this.#subscriptions.add(
+            from(['keyup', 'input'])
+                .pipe(
+                    mergeMap(event => fromEvent(window, event)),
+                    debounceTime(0),
+                    tap(() => (this.#hasErrors = !!document.getElementsByClassName('ng-invalid')[0])),
+                )
+                .subscribe(),
+        );
+    }
+
     get valid(): boolean {
         return !this.form || this.form.valid;
     }
@@ -48,7 +64,7 @@ export abstract class BaseDialogComponent implements OnDestroy {
     abstract save(options?: SaveOptions): void;
 
     ngOnDestroy(): void {
-        this.#backdropClickSubscription.unsubscribe();
+        this.#subscriptions.unsubscribe();
     }
 
     close(): void {
@@ -83,11 +99,6 @@ export abstract class BaseDialogComponent implements OnDestroy {
         }
     }
 
-    @HostListener('window:keyup', ['$event'])
-    onKeyUp(): void {
-        this.#hasErrors = !!document.getElementsByClassName('ng-invalid')[0];
-    }
-
     protected _openConfirmDialog() {
         const dialogRef = this.#confirmationDialogService.openDialog({ disableConfirm: !this.valid });
         return firstValueFrom(dialogRef.afterClosed());