Блог

У меня есть форма, в которой пользователь может регистрировать учетные записи, когда пользователь вводит имя пользователя, если учетная запись уже существует, отображается сообщение об ошибке. Однако, поскольку я проверяю это по событию, флаг проверки отображается только один раз и не привязывается снова, если пользователь удаляет текст и повторно вводит.

Моя форма в моем компоненте HTML:

 <label for="Username">Username:</label>
<input type="text" (keyup)="ConfirmDataBeforeSubmission(regisUsername.value)" pattern="^[a-zA-Z0-9] $" required name="Username" id="Username" class="modal_input" #regisUsername='ngModel' ngModel />
               <!-- Errors -->
<div class="has-text-danger" *ngIf="(regisUsername.touched || regisUsername.dirty) amp;amp; (regisUsername.errors)">
  <div *ngIf="regisUsername.errors?.required">
   Username can't be blank
  </div>
  <div *ngIf="regisUsername.errors?.pattern">
   Username can't have special characters/space
  </div>
</div>
<div *ngIf="duplicateAccount">
   Username already exists
</div>
  

Файл ts моего компонента, который обрабатывает ошибку

   duplicateAccount = false;
  UserListFromAPI: User[] = [];
 ConfirmDataBeforeSubmission(username: string) {
    this.myAPIService.GetListUser().subscribe((list) => {
      this.UserListFromAPI = list;
    });

    this.UserListFromAPI.forEach(element => {
      if (element.Username === username) {
        this.duplicateAccount = !this.duplicateAccount;
      }
    });

  }
  

Есть ли какое-либо решение? Я новичок в Angular, поэтому буду признателен за любую помощь / предложение.

Почему вы вызываете API каждый раз, когда пользователь вводит что-либо в текстовое поле?

Я бы переписал код следующим образом:

 import { Component, OnInit } from '@angular/core';

/** @title Simple form field */
@Component({
  selector: 'form-field-overview-example',
  templateUrl: 'form-field-overview-example.html',
  styleUrls: ['form-field-overview-example.css'],
})
export class FormFieldOverviewExample implements OnInit {

  duplicateAccount = false;
  UserListFromAPI: User[] = [];

  ngOnInit() {
    this.GetUserList();
  }

  ConfirmDataBeforeSubmission(username: string) {
    this.UserListFromAPI.forEach(element => {
      if (element.Username === username) {
        this.duplicateAccount = !this.duplicateAccount;
      }
    });
  }

  GetUserList() {
    this.myAPIService.GetListUser().subscribe((list) => {
      this.UserListFromAPI = list;
    });
  }
}
  

Пожалуйста, проверьте и дайте мне знать, работает это или нет!

Редактировать:

Я перепишу функцию ConfirmDataBeforeSubmission() :

 ConfirmDataBeforeSubmission(username: string) {
   this.duplicateAccount = this.UserListFromAPI.some(x => x.Username == username);
}
  

Вот рабочий пример без вызова API (т. е. с образцами данных)

StackBlitz