Angular 2 Проверьте, существует ли электронная почта

Question

Я изо всех сил пытаюсь сделать метод, который проверяет, существует ли адрес электронной почты в моей БД. Если это произойдет, я должен получить 1 в качестве ответа и 0, если это не так. Вот моя форма HTML:

<form novalidate (ngSubmit)="addUser(utilisateur)" [formGroup]="formUtilisateur">
        <div class="form-group">
            <label for="email">Email*:</label>
            <input type="email" id="email" class="form-control" placeholder="Adresse Email" formControlName="email">
          </div>
        <div class="error text-center alert alert-danger" *ngIf="formUtilisateur.get('email').hasError('incorrectEmailFormat') && formUtilisateur.get('email').touched">
          Format Email incorrect.
        </div>
        <div class="error text-center alert alert-danger" *ngIf="formUtilisateur.get('email').hasError('emailExistant') && formUtilisateur.get('email').touched">
          Already taken
        </div>
        <br>
      <button type="submit" class="btn btn-info bnt-lg col-md-12" [disabled]="formUtilisateur.invalid">Sign up</button>
    </form>

Теперь мой signup.service.ts:

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Utilisateur } from "../../models/utilisateur";

@Injectable()
export class SignupService {

  urlCheckEmail: string = 'http://localhost:8080/signup/checkEmail';

  constructor(private http: Http) { }

  checkEmail(email:string) {
    return this.http.post(this.urlCheckEmail, email)
      .map((res: Response) =>{return res.json().status});
  }
}

Теперь мой компонент, который использует сервис signup.component.ts:

import { Component, OnInit } from '@angular/core';
import { Router } from "@angular/router";
import { Utilisateur } from "../../models/utilisateur";
import { SignupService } from "../../services/signup/signup.service";
import { FormBuilder, FormGroup, FormControl, Validators } from "@angular/forms";

@Component({
  selector: 'signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})

export class SignupComponent implements OnInit {

  formUtilisateur: FormGroup;
  utilisateur: Utilisateur;

  ngOnInit() {
    this.formUtilisateur = this.fb.group({
      email: ['', Validators.compose([Validators.required, this.emailExisteValidation])]
    });
  }

  constructor(private signupService: SignupService, private fb: FormBuilder) { }

  emailExisteValidation() {
    this.signupService.checkEmail(this.formUtilisateur.controls['email'].value).subscribe(data => {
if(data != 0)
      return { "emailExistant": true };
    })
    return null;
  }
}

Находясь в консоли браузера, я вижу это как ошибку:

Ошибка типа: не удается прочитать свойство 'signupService' неопределенного в webpackJsonp.../../../../../src/app/components/signup/signup.component.ts.SignupComponent.emailExisteValidation (signup.component. тс:54) ...

Строка 54 это: this.signupService.checkEmail(this.formUtilisateur.controls['email'].value).subscribe(data => {

Я не знаю, если это лучший способ проверить, существует ли адрес электронной почты, но это то, что я пробовал до сих пор, и это не работает.

Например, для [e-mail] я должен получить 1 в качестве ответа, так как он уже хранится в моей БД. Почтальон проверки

Буду очень признателен за вашу помощь, спасибо.

Answer 1

Пожалуйста, добавьте RegistrationService в провайдеры в вашем модуле / компоненте.

providers: [SignupService]

Также,

let control = this.formUtilisateur.get('email');
if (control.valid && control.dirty) {
    this.signupService.checkEmail(this.formUtilisateur.controls['email'].value).subscribe(data => {
        if(data != 0)
          return { "emailExistant": true };
        })
    }
}
return null;