如何在Angular 7中同步模板上的变量值？

Question

I have a form that user can register the accounts, when user type in the username, if there's already existed account the error message will show up. However as I check this by event, the check flag only render once and not binding again if user delete the text and reinput.

My form on my component 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) && (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>

My component ts file that handle the error

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

  }

Is there any solution ? I'm new to Angular so any help/suggestion would be appreciated.

Answer 1

Why you are calling API every time when the user types anything in the textbox?

I would rewrite the code like this:

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

Please check and let me know if its working or not!

EDIT:

I will rewrite the function ConfirmDataBeforeSubmission() :

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

Here is working example without API call (ie with Sample data)

StackBlitz