Angular 2/Angular 4 - 无法读取定义在authService的属性newZoneAwarePromise

Question

我创建了authService，在其中创建了一个函数来检查电子邮件是否已经注册。虽然员工验证我调用此函数forbiddenEmails但它给出了一个错误：在newZoneAwarePromise

这里定义无法读取authService的财产是我的代码：

import { Component, OnInit } from '@angular/core'; 
import { NgForm, FormGroup, FormControl, Validators } from '@angular/forms'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/toPromise'; 
import 'rxjs/Rx'; 

import { AuthService } from '../auth/auth.service'; 

@Component({ 
    selector: 'app-employee', 
    templateUrl: './employee.component.html', 
    styleUrls: ['./employee.component.css'] 
}) 
export class EmployeeComponent implements OnInit { 
    genders = ['male', 'female']; 
    departments = ['IT', 'Account', 'HR', 'Sales']; 
    employeeForm: FormGroup; 
    employerData = {}; 

    constructor(private authService: AuthService) { } 

    ngOnInit() { 
    this.employeeForm = new FormGroup({ 
     'name': new FormControl(null, [Validators.required]), 
     'email': new FormControl(
      null, 
      [Validators.required, Validators.email], 
      this.forbiddenEmails 
    ), 
     'password': new FormControl(null, [Validators.required]), 
     'gender': new FormControl('male'), 
     'department': new FormControl(null, [Validators.required]) 
    }); 
    } 

    registerEmployee(form: NgForm) { 
    console.log(form); 
    this.employerData = { 
     name: form.value.name, 
     email: form.value.email, 
     password: form.value.password, 
     gender: form.value.gender, 
     department: form.value.department 
    }; 

    this.authService 
     .registerEmployee(this.employerData) 
     .then(
      result => { 
       console.log(result); 
       if (result.employee_registered === true) { 
       console.log('successful'); 
       this.employeeForm.reset(); 
       // this.router.navigate(['/employee_listing']); 
       }else { 
       console.log('failed'); 
       } 
      } 
     ) 
     .catch(error => console.log(error)); 
    } 

    forbiddenEmails(control: FormControl): Promise<any> | Observable<any> { 
    const promise = new Promise<any>((resolve, reject) => { 
     this.authService 
      .employeeAlreadyRegistered(control.value) 
      .then(
       result => { 
       console.log(result); 
       if (result.email_registered === true) { 
        resolve(null); 
       }else { 
        resolve({'emailIsForbidden': true}); 
       } 
       } 
     ) 
      .catch(error => console.log(error)); 
     /*setTimeout(() => { 
     if (control.value === 'test@test.com') { 
      resolve({'emailIsForbidden': true}); 
     } else { 
      resolve(null); 
     } 
     }, 1500);*/ 
    }); 
    return promise; 
    } 

} 

AuthService代码：

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Headers, RequestOptions } from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/toPromise'; 
import 'rxjs/Rx'; 

@Injectable() 
export class AuthService { 
    url = 'http://mnc.localhost.com/api/user/'; 
    response: object; 

    constructor(private http: Http) {} 

    signInUser(email: string, password: string): Promise<any> { 
     console.log('1111'); 
     let headers = new Headers({ 'Content-Type': 'application/json' }); 
     let options = new RequestOptions({ headers: headers }); 
     return this.http 
      .post(this.url + 'signIn', { email: email, password: password }, options) 
      .toPromise() 
      .then(this.extractData) 
      .catch(this.handleError); 
    } 

    registerEmployee(employeeData: object): Promise<any> { 
     let headers = new Headers({ 'Content-Type': 'application/json' }); 
     let options = new RequestOptions({ headers: headers }); 
     return this.http 
      .post(this.url + 'registerEmployee', employeeData, options) 
      .toPromise() 
      .then(this.extractData) 
      .catch(this.handleError); 
    } 

    employeeAlreadyRegistered(email: string): Promise<any> { 
     let headers = new Headers({ 'Content-Type': 'application/json' }); 
     let options = new RequestOptions({ headers: headers }); 
     return this.http 
      .post(this.url + 'employeeAlreadyRegistered', { email: email }, options) 
      .toPromise() 
      .then(this.extractData) 
      .catch(this.handleError); 
    } 

    private extractData(res: Response) { 
     let body = res.json(); 
     return body || {}; 
    } 

    private handleError(error: any): Promise<any> { 
     console.error('An error occurred', error); // for demo purposes only 
     return Promise.reject(error.message || error); 
    } 

} 

的registerEmployee函数也使用authservice，但它在我添加此验证之前正常工作，因此意味着forbiddenEmails函数中存在一些问题。

我是新来的角js和无法解决问题。

Answer 1

在你ngOnInit()改变声明的电子邮件中自定义的验证方式：

ngOnInit() { 
    this.employeeForm = new FormGroup({ 
    'name': new FormControl(null, [Validators.required]), 
    'email': new FormControl(
     null, 
     [Validators.required, Validators.email], 
     (control: FormControl) => { 
      // validation email goes here 
      // return this.forbiddenEmails(control); 
     } 
    ), 
    'password': new FormControl(null, [Validators.required]), 
    'gender': new FormControl('male'), 
    'department': new FormControl(null, [Validators.required]) 
    }); 
} 

验证是造成你的错误，因为this上下文改为FormGroup类的时刻，你为它分配：

'email': new FormControl(
    null, 
    [Validators.required, Validators.email], 
    (control: FormControl) => this.forbiddenEmails 
) 

这就是为什么你在打电话时authService，因为它是在寻找对FormGroup类没有得到一个undefined错误的Component

注意：只有在用户尝试提交表单时检查forbiddenEmails或者将焦点放在电子邮件元素上。把它放在验证器中并不好，因为验证器往往会执行很多次。

希望帮助