Angular 2/Angular 4 - Kann die Eigenschaft von authService nicht lesen von definiert bei newZoneAwarePromise

Question

Ich habe authService erstellt, in dem ich eine Funktion erstellt habe, die überprüft, ob Email bereits registriert ist. Während Mitarbeiter Validierung ich diese Funktion forbiddenEmails nennen, aber es gibt einen Fehler: nicht Eigentum von authService lesen kann von

bei newZoneAwarePromise definiert

Hier ist mein Code:

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 Code:

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

} 

Die Die Funktion "registerEmployee" verwendet auch authservice, aber es hat gut funktioniert, bevor ich diese Validierung hinzugefügt habe, so dass es ein Problem mit der Funktion "verbotene E-Mails" gibt.

Ich bin neu zu eckigen js und nicht in der Lage, das Problem zu lösen.

Answer 1

In Ihrem ngOnInit() Änderung der Art und Weise Sie die benutzerdefinierte Validator für E-Mails erklären:

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

der Validator Sie den Fehler verursacht wurde, weil der Kontext this zum FormGroup Klasse geändert, sobald Sie es zu:

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

das ist, warum Sie ein undefined Fehler bekommen, wenn authService Aufruf, weil es in der Suche wurde auf FormGroup Klasse nicht Ihrem Component

HINWEIS: Überprüfen Sie nur die forbiddenEmails, wenn Benutzer versucht, das Formular zu senden, ODER den Fokus auf das E-Mail-Element verliert. Es ist nicht gut, es in einen Validator zu packen, da Validierer dazu neigen, oft ausgeführt zu werden.

Hoffnung, dass