Http không hoạt động trong xác thực không đồng bộ tùy chỉnh Angular 2

Question

Tôi đang cố gắng tạo trình xác thực không đồng bộ tùy chỉnh, đi tới máy chủ và kiểm tra xem email đã được đăng ký hay chưa.

Thật không may, có vẻ như yêu cầu nhận không bao giờ bị sa thải, bởi vì không có gì xảy ra. Tôi đã thử nhiều console.log bên trong subscribe, nhưng chúng không chạy.

Tôi đã kiểm tra xem yêu cầu đó có hoạt động bên ngoài trình xác thực hay không, và điều đó có nghĩa là không phải vậy.

import { Component } from '@angular/core'; 
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms'; 
import { Response, Http } from '@angular/http'; 

@Component({ 
    templateUrl: 'build/pages/welcome/signup/signup.html', 
    providers: [AuthService, CustomValidators] 
}) 
export class Signup { 

    signupForm: FormGroup; 

    constructor(private formBuilder: FormBuilder, private http: Http) { 

     this.signupForm = formBuilder.group({ 
      'email': ['', Validators.required, this.checkEmail], 
     }): 
    } 

    checkEmail(control: FormControl): Promise<any> { 

      const promise = new Promise<any>(
      (resolve, reject) => { 

       this.http.get('/sharealead/main.php?action=checkEmail').subscribe(
        (res: Response) => { 
         console.log('it never gets here'); 
         console.log(res) 
         if (res.text() == 'already there') { 
          resolve({'emailTaken': true}); 
         } else { 
          resolve(null); 
         } 
        }, 
        (err) => { 
         console.log('it never gets here'); 
         console.log(err); 
        } 
       ) 
      } 
     ); 
     return promise; 
    } 

} 

Answer 1

Đó là vì bạn tham chiếu hàm và bạn bị mất ngữ cảnh this. Bạn có thể sử dụng phương pháp bind hoặc một chức năng gói mũi tên để khắc phục điều đó (liên kết các chức năng để instance của component):

this.signupForm = formBuilder.group({ 
     'email': ['', Validators.required, this.checkEmail.bind(this) ], 
}); 

hoặc

this.signupForm = formBuilder.group({ 
     'email': ['', Validators.required, (control:Control) => { 
      return this.checkEmail(control); 
     } ], 
}); 

Trong trường hợp của bạn, this không chứa http property ...