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或者將焦點放在電子郵件元素上。把它放在驗證器中並不好，因爲驗證器往往會執行很多次。

希望幫助