Angular 2 Vérifiez si le courriel existe

Question

Je me bats pour faire une méthode qui vérifie si une adresse e-mail existe dans ma base de données. Si c'est le cas, je devrais obtenir 1 comme réponse et 0 si ce n'est pas le cas. Voici mon formulaire 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> 

Maintenant, mes 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}); 
    } 
} 

Maintenant, mon composant qui utilise les signup.component.ts de service:

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

Alors que dans la console du navigateur, je vois cela comme erreur:

TypeError: Cannot read property 'signupService' of undefined at webpackJsonp.../../../../../src/app/components/signup/signup.component.ts.SignupComponent.emailExisteValidation (signup.component.ts:54) ...

Ligne 54 est: this.signupService.checkEmail(this.formUtilisateur.controls['email'].value).subscribe(data => {

Je ne sais pas si c'est le meilleur moyen de vérifier si une adresse e-mail existe, mais c'est ce que j'ai essayé jusqu'à présent et cela ne fonctionne pas.

Par exemple, pour test@test.com je devrais obtenir comme réponse qu'il est déjà stocké dans mon DB. Postman checker

J'apprécierais vraiment votre aide, merci.

Answer 1

Veuillez ajouter le SignupService dans les fournisseurs de votre module/composant.

providers: [SignupService] 

En outre,

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;