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

name-already-exists.component.ts

@Component({
  selector: 'app-ecs-fieldsets-with-details',
  templateUrl: './ecs-fieldsets-with-details.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class EcsFieldsetsWithDetailsComponent implements OnChanges {
  private storeService = inject(EcsFieldsStoreService);

  nameAlreadyExists$ = new BehaviorSubject<boolean>(false);

  /**
   * This method calls the store service and sets the boolean nameAlreadyExists depending on the result.
   * @param name
   */
  checkIfNameExists(name: string): void {
    const res: boolean = this.storeService.checkIfNameExists(name);
    this.nameAlreadyExists$.next(res);
  }

  onCancelEdit(): void {
    this.nameAlreadyExists$.next(false);
  }
    
  ngOnChanges(changes: SimpleChanges): void {
    if (changes['ecsFieldsets']?.currentValue && !changes['ecsFieldsets']?.firstChange) {
      this.nameAlreadyExists$.next(false);
    }
  }

  updateEcsField(updatedEntity: UpdatedEntity<UpdatableEcsFieldAttributes>): void {
    this.storeService.updateEcsField(updatedEntity).then(() => {
      this.nameAlreadyExists$.next(false);
    });
  }
    
  createCustomField(entity: EcsField): void {
    this.storeService.createCustomField(entity).then(() => {
      this.nameAlreadyExists$.next(false);
    });
  }
}