title: Angular 2 Check if email exists
body: <p>I'm struggling to make a method that checks if an email address exists in my DB.
  If it does, I should get 1 as response and 0 if it doesn't.
  Here's my form HTML :</p>
  
  <pre><code>&lt;form novalidate (ngSubmit)="addUser(utilisateur)" [formGroup]="formUtilisateur"&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="email"&gt;Email*:&lt;/label&gt;
              &lt;input type="email" id="email" class="form-control" placeholder="Adresse Email" formControlName="email"&gt;
            &lt;/div&gt;
          &lt;div class="error text-center alert alert-danger" *ngIf="formUtilisateur.get('email').hasError('incorrectEmailFormat') &amp;&amp; formUtilisateur.get('email').touched"&gt;
            Format Email incorrect.
          &lt;/div&gt;
          &lt;div class="error text-center alert alert-danger" *ngIf="formUtilisateur.get('email').hasError('emailExistant') &amp;&amp; formUtilisateur.get('email').touched"&gt;
            Already taken
          &lt;/div&gt;
          &lt;br&gt;
        &lt;button type="submit" class="btn btn-info bnt-lg col-md-12" [disabled]="formUtilisateur.invalid"&gt;Sign up&lt;/button&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>Now my signup.service.ts :</p>
  
  <pre><code>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) =&gt;{return res.json().status});
    }
  }
  </code></pre>
  
  <p>Now my component that uses the service signup.component.ts :</p>
  
  <pre><code>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 =&gt; {
  if(data != 0)
        return { "emailExistant": true };
      })
      return null;
    }
  }
  </code></pre>
  
  <p>While in the browser console, I see this as error :</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'signupService' of undefined
        at
    webpackJsonp.../../../../../src/app/components/signup/signup.component.ts.SignupComponent.emailExisteValidation
    (signup.component.ts:54)    ...</p>
  </blockquote>
  
  <p>Line 54 is : <code>this.signupService.checkEmail(this.formUtilisateur.controls['email'].value).subscribe(data =&gt; {</code></p>
  
  <p>I don't know if it's the best way to check if an email address exists but that's what I've tried so far and it doesn't work.</p>
  
  <p>For example, for <em>test@test.com</em> I should get <strong>1</strong> as response as it's already stored in my DB. <a href="https://imgur.com/a/ptlmp" rel="nofollow noreferrer">Postman checker</a></p>
  
  <p>I would really appreciate your help, thanks.</p>