Angular 6 - Форма на основе шаблона - Проверьте, существует ли уже электронная почта

Question

Я пытаюсь проверить, существует ли уже электронное письмо, которое пользователь заполнил в форме для регистрации. Я создал директиву, чтобы проверить это, но я не знаю, когда получить список уже существующих электронных писем и как передать его в файл валидатора. На данный момент я получаю список пользователей из базы данных в "register.component.ts" . Затем я пытаюсь передать его в html с appEmailValidator = "существующийEmailsList" . Тем не менее, console.log (this.emailsList); в файле директивы печатает строку существующиеEmailsList, а не список.

Register.component.html

<div class="jumbotron">
  <div class="container">
    <div class="row">
      <div class="col-sm-6 offset-sm-3">
        <h2>Register</h2>
        <form (submit)="register()" #registerForm="ngForm">

          <div id="emailField">
            <mat-form-field class="full-width">
              <input matInput placeholder="Email" type="text" required appEmailValidator="existingEmailsList" email [(ngModel)]="credentials.email" name="email" #email="ngModel">
            </mat-form-field>
            <div *ngIf="email.invalid && (email.dirty || email.touched)" class="alert alert-danger">
              <div *ngIf="email.errors.required">
                Email is required.
              </div>
              <div *ngIf="email.errors.email">
                Email not valid.
              </div>
              <div *ngIf="name.errors.Email">
                 Email already exists.
             </div>
            </div>
          </div>

          <div id="passwordField">
            <mat-form-field class="full-width">
              <input matInput placeholder="Passwod" type="password" required minlength="7" [(ngModel)]="credentials.password" name="password"
                #password="ngModel">
            </mat-form-field>
            <div *ngIf="password.invalid && (password.dirty || password.touched)" class="alert alert-danger">
              <div *ngIf="password.errors.required">
                Password is required.
              </div>
              <div *ngIf="password.errors.minlength">
                Password must be at least 7 characters long.
              </div>
            </div>
          </div>


          <button type="submit" class="btn btn-success" [disabled]="!registerForm.form.valid">Register!</button>
        </form>
      </div>
    </div>
  </div>
</div>

Register.component.ts

import { Component, OnInit } from "@angular/core";
import { AuthenticationService } from "../../services/authentication.service";
import { Router } from "@angular/router";
import { ApiService } from "../../services/api.service";

@Component({
  selector: "app-register",
  templateUrl: "./register.component.html",
  styleUrls: ["./register.component.scss"]
})
export class RegisterComponent implements OnInit {
  credentials: any = {};
  existingEmailsList: any = [];

  constructor(
    private auth: AuthenticationService,
    private router: Router,
    private api: ApiService
  ) {}

  ngOnInit() {
    this.api.getAllUsers().subscribe(
      data => {
        for (let item in data) {
          this.existingEmailsList.push(data[item].email);
        }
      },
      err => {
        console.log(err);
      }
    );
  }

  register() {
    this.auth.register(this.credentials).subscribe(
      () => {
        this.router.navigateByUrl("/profile");
      },
      err => {
        console.error(err);
      }
    );
  }
}

Email-Validator.directive.ts

import {
  Validator,
  AbstractControl,
  NG_VALIDATORS,
  ValidatorFn
} from "@angular/forms";
import { Directive, Input } from "@angular/core";

export function compareEmails(emailsList: any): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    let alreadyExist = false;
    for (let email of emailsList) {
      if (email === control.value) {
        alreadyExist = true;
      }
    }
    return alreadyExist ? { Email: { value: control.value } } : null;
  };
}

@Directive({
  selector: "[appEmailValidator]",
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: EmailValidatorDirective,
      multi: true
    }
  ]
})
export class EmailValidatorDirective implements Validator {
  @Input("appEmailValidator") emailsList: string;

  validate(control: AbstractControl): { [key: string]: any } | null {
    console.log(this.emailsList);
    return this.emailsList ? compareEmails(this.emailsList)(control) : null;
  }
}