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

在浏览器控制台中，我将其视为错误：

TypeError：无法读取未定义的属性'signupService' 在 webpackJsonp ... / .. / .. / .. / .. / src目录/应用/组件/注册/ signup.component.ts.SignupComponent.emailExisteValidation （signup.component.ts:54）...

第54行是：this.signupService.checkEmail(this.formUtilisateur.controls['email'].value).subscribe(data => {

我不知道这是否是检查电子邮件地址是否存在的最佳方法，但这是我迄今为止尝试过的，但它不起作用。

例如，对于 test@test.com ，我应该 1 作为响应，因为它已经存储在我的数据库中。 Postman checker

非常感谢你的帮助，谢谢。

Answer 1

请在模块/组件的提供程序中添加SignupService。

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;

Angular 2检查电子邮件是否存在

1 个答案: