Angular: Simplified logic to show real-time feedback to users when they type a name that already exists in the system

esc-field-name-already-exists.component.ts

  nameAlreadyExists: boolean = false;

  private notifyParentComponentWhenNameChanges(): void {
    this.form
      ?.get('name')
      ?.valueChanges.pipe(
      takeUntilDestroyed(this.destroyRef),
      debounceTime(300), // debounce user input
      distinctUntilChanged()
    )
      .subscribe((name) => {
        if (name) {
          this.nameAlreadyExists = this.storeService.checkIfNameExists(name);
        }
      });
  }
  
  onClickCancel(): void {
    if (this.form?.touched && this.form?.dirty) {
      const dialogData: DialogData = {
        hasActions: true,
        mode: 'confirmAction',
        text: '',
        title: 'shared.MESSAGES.CONFIRM_CANCEL.TITLE',
      };
      const dialogRef = this.dialog.open(ConfirmDialogComponent, {
        disableClose: true,
        data: dialogData,
      });
      dialogRef.afterClosed().subscribe((data: boolean) => {
        if (data) {
          this.updateForm();
          this.disableEditMode();
          this.nameAlreadyExists = false;
        }
      });
    } else {
      this.disableEditMode();
    }
  }