角度2のファイナルで非同期フォームの検証メソッド内でhttp呼び出しを行う方法は？

Question

私はAngular 2の最終版を使用しており、非同期形式の検証を試みています。私のコンポーネントでは、私は、コンストラクタ内のコードの下に持っています：

this.myForm = this._formBuilder.group({ 
     'firstName': ['', Validators.compose([Validators.required, Validators.maxLength(45), ValidationService.nameValidator])], 
     'userName': ['', Validators.compose([Validators.required]), Validators.composeAsync([ValidationService.userNameValidator])], 
     'userEmail': ['', Validators.compose([Validators.required, ValidationService.emailValidator])], 
     'confirmEmail': ['', Validators.required], 
     'password': ['', Validators.compose([Validators.required, ValidationService.passwordValidator])], 
     'confirmPassword': ['', Validators.required] 
     }); 

私は、ユーザー名が既に入力された場合は、HTTP呼び出しを介してDBに存在するようにチェックしようとしています。

検証方法は以下の通りである：

static userNameValidator(control: FormControl){ 
    let http: Http; 
    if (control.value.trim().length === 0) { 
     return new Promise((resolve, reject) => { 
      resolve(null); 
     }); 
    } 
    if (control.value) { 
     console.log('value:' + control.value); 
     return new Promise((resolve, reject) => { 
      setTimeout(() => { 
       var url = '/isUserNameUnique/';//this is getting printed 
       console.log('url is ' + url); 
       http.get(url + control.value + '/').map(response => response.json()).subscribe(result => { 
        if (result === false) { 
         resolve({'userAlreadyInUse': true}); 
        } else { 
         resolve(null); 
        } 
       }); 
      }, 1000); 
     }); 
    } 
} 

コンソールが印刷なっています。しかしhttpコールは行われません。エラーが

TypeError: Cannot read property 'get' of undefined 

誰かが私には問題が正確であるかを理解するのに役立つことはできますか？と言いますか

Answer 1

あなたはhttpをdepedencyから取り出して使用していません。私はそれに静的メソッドを持つクラスを定義すると言うでしょう。次に、コンストラクタにhttpの依存関係を求めて、それを必要に応じて使用します。私はあなたがコンストラクタで、HTTPを有し、かつ、このような静的メソッドの内部で、それを使っているようinitially-与えられたものと同じように使用

コード

@Injectable() 
export class MyClass { 
    constructor(private http: Http) {} 
    static userNameValidator(control: FormControl) { 
    if (control.value.trim().length === 0) { 
     return new Promise((resolve, reject) => { 
     resolve(null); 
     }); 
    } 
    if (control.value) { 
     console.log('value:' + control.value); 
     return new Promise((resolve, reject) => { 
     setTimeout(() => { 
      var url = '/isUserNameUnique/'; //this is getting printed 
      console.log('url is ' + url); 
      //used http as this.http 
      this.http.get(url + control.value + '/').map(response => response.json()) 
      .subscribe(result => { 
      if (result === false) { 
       resolve({ 
       'userAlreadyInUse': true 
       }); 
      } else { 
       resolve(null); 
      } 
      }); 
     }, 1000); 
     }); 
    } 
    } 
}