각도 2/각도 4 - newZoneAwarePromise에 정의 된 authService의 속성을 읽을 수 없습니다.

Question

전자 메일이 이미 등록되어 있는지 확인하는 함수를 만든 authService를 만들었습니다. 직원 유효성 검사가 나는이 기능 forbiddenEmails를 호출하지만 오류를 제공하는 동안 :

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

} 

newZoneAwarePromise

다음

에서 정의의 authService의 속성을 읽을 수 없습니다 것은 내 코드입니다 registerEmployee 함수는 authservice도 사용하지만이 유효성 검사를 추가하기 전에는 잘 작동 했으므로 forbiddenEmails 함수에 몇 가지 문제가 있습니다.

나는 각도 j를 처음 사용하기 때문에 문제를 해결할 수 없습니다. 당신의 ngOnInit() 변화에

Answer 1

당신이 이메일에 대한 사용자 지정 유효성 검사기를 선언하는 방식 : 발리는 당신에게 오류의 원인이 된

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 클래스로 변경하기 때문에 순간 당신이 그것을 할당합니다

그것은하지 FormGroup 클래스를 찾고 있었기 때문에 authService를 호출 할 때 당신이 undefined 오류가 발생하는 이유

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

는 당신의 Component

참고 : 사용자가 양식을 제출하려고하거나 전자 메일 요소에 초점을 잃을 때 forbiddenEmails 만 확인하십시오. 유효성 검사기를 여러 번 실행하는 경향이 있기 때문에 유효성 검사기 안에 넣는 것은 좋지 않습니다.