如何在angular 2 final中的异步表单验证方法中进行http调用?

时间:2016-11-22 19:07:34

标签: forms validation http angular asynchronous

我正在使用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

有人可以帮我理解究竟是什么问题吗?

1 个答案:

答案 0 :(得分:0)

您还没有使用int **从依赖中获取它。我说用静态方法定义类。然后在构造函数中询问http依赖项,并在任何需要的地方使用它。

<强>代码

http