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

esc-fieldset-name-already-exists.component.html

<ng-container *ngIf="isCreateMode">
          <div class="mt-0">
            <app-create-custom-field
              [ecsFieldset]="entity.id!"
              [nameAlreadyExists]="nameAlreadyExists"
              (checkIfNameExists)="checkIfNameExists.emit($event)"
              (cancelEdit)="cancelEdit.emit()"
              (save)="createCustomField.emit($event)"
            >
            </app-create-custom-field>
          </div>
        </ng-container>

<ng-container *ngIf="!openAllFields && selectedEcsField?.id">
          <div class="mt-2">
            <app-ecs-field
              [entity]="selectedEcsField!"
              [nameAlreadyExists]="nameAlreadyExists"
              (checkIfNameExists)="checkIfNameExists.emit($event)"
              (cancelEdit)="cancelEdit.emit()"
              (delete)="deleteEcsField.emit($event)"
            >
            </app-ecs-field>
          </div>
        </ng-container>