diff --git a/src/lib/dialog/base-dialog.component.ts b/src/lib/dialog/base-dialog.component.ts index b17e202..b2f058e 100644 --- a/src/lib/dialog/base-dialog.component.ts +++ b/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, - 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, + 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()); }