Angular 2.3.1 异步自定义验证程序承诺未解决

Question

我有一个注册表单，我想检查用户名是否已被占用。为了实现这一点，我现在正在使用承诺。我的注册组件如下所示：

import { Component, OnInit } from '@angular/core';
import { FormControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { UserService } from '../shared/user.service'

@Component({
  selector: 'app-auth',
  providers: [],
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.css']
})

export class AuthComponent implements OnInit {

  // Tabs for log in or sign up
  tab = 'signup';

  // Sign up form
  signUpForm: FormGroup;

  // Log in form
  logInForm: FormGroup;

  constructor(private formBuilder: FormBuilder, private ussr: UserService) {
     this.signUpForm = this.formBuilder.group({
       'username': [null, [
         Validators.required, Validators.minLength(4), Validators.maxLength(12), this.ussr.getUserNameFromServer
       ]], 
       'email': '', 
       'password': '' });
    this.logInForm = this.formBuilder.group({ 'username': '', 'password': '' });
  }

  ngOnInit() {
  }

  activeTab(tab: string) {
    this.tab = tab;
  }

  signUpSubmit(value: any) {
    console.log(value);
  }

}

和用户服务：

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions  } from '@angular/http';
import { FormControl } from '@angular/forms';
import 'rxjs/add/operator/map';

@Injectable()
export class UserService {

    constructor (private http: Http) {}

    private extractData (res: Response) {
        let body = res.json();
        return body || { };
    }

    getUserNameFromServer = (c: FormControl) => {

        return new Promise (
             (resolve, reject) => {
                 this.http.get('https://jsonplaceholder.typicode.com/users/1')
                 .map(this.extractData)
                 .subscribe(
                     (res: any) => {
                         if (c.value == res.username) {
                             console.log('taken')
                             resolve({'usernameTaken': true})
                         } else {
                             console.log('is not taken')
                             resolve(null)
                         }
                     },
                     err => { console.log(err) }
                 )   
             }
         );

    }

}

我已经阅读了一些关于这个主题的博客文章，我也检查了两个 SO 问题 (, )，但我无法让它工作。该服务成功获得了服务器的答复，但是当我在组件的验证器中调用它时，表单每次都会无效。

在上面的例子中，他们只是在验证器部分调用它，我猜 ng2 在后台完成剩下的工作，或者我错了？验证者如何获得承诺的价值？

Answer 1

问题是我将异步自定义验证器插入到同步验证器部分。这意味着第二个参数用于同步验证器，第三个参数用于异步验证器。

现在有效：

'username': [null,
         [ Validators.required, Validators.minLength(4), Validators.maxLength(12) ],
         [ this.ussr.getUserNameFromServer ]
  ],

Angular 2.3.1 异步自定义验证程序承诺未解决

Angular 2.3.1 async custom validator promise doesn't resolve

javascript

asynchronous

angular2-forms

angular