Angular: 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

@Component({
  selector: 'app-ecs-field',
  templateUrl: './ecs-field.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class EcsFieldComponent {
  formBuilder = inject(FormBuilder);

  @Input() entity: EcsField;
  @Input() nameAlreadyExists: boolean | null = false;
  @Output() checkIfNameExists = new EventEmitter<string>();
  @Output() cancelEdit = new EventEmitter<void>();
    
  ngOnInit(): void {
    this.updateForm();
  }

  private notifyParentComponentWhenNameChanges(): void {
    this.form
      ?.get('name')
      ?.valueChanges.pipe(
      takeUntilDestroyed(this.destroyRef),
      debounceTime(300), // debounce user input
      distinctUntilChanged()
    )
      .subscribe((name) => {
        if (name) {
          this.checkIfNameExists.emit(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.cancelEdit.emit();
        }
      });
    } else {
      this.disableEditMode();
    }
  }
}