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

escfield-name-already-exists.component.ts

@Component({
  selector: 'app-create-custom-field',
  templateUrl: './create-custom-field.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CreateCustomFieldComponent implements OnInit {
  private readonly destroyRef = inject(DestroyRef);
  
  @Input() nameAlreadyExists: boolean | null = false;
  @Output() checkIfNameExists = new EventEmitter<string>();
  

  ngOnInit(): void {
    this.updateForm();
    this.notifyParentComponentWhenNameChanges();
  }

  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);
        }
      });
  }
    
  // ...
}