Angular 5 FormGroup验证器Web服务结果没有触发NGIF HASERROR

Question

我有一个自定义的FormGroup验证器，该验证器无法正确更新验证器错误状态，从Web服务呼叫返回，该呼叫检查是否已经使用了DisplayName。

在下面的代码中，我知道我的HTML代码正在工作，因为当显示名称输入为空时，我的组件的验证isplayname函数已显示"显示名称"。然后，当您开始键入字母时，Web服务被调用以开始验证第三个字母上的条目 - 然后，消息消失，当我键入匹配DB中一个的DisplayName时，Web服务正确返回了TRUE，但是return { displayNameTaken: true };呼叫不会导致错误显示。

我知道这与Web服务返回的承诺有关，但我无法找到解决方案。

component.ts

ngOnInit() {
    this.dnFormGroup = this.formBuilder.group({
        displayName: ['', this.validateDisplayName.bind(this)]
    });    
}
public validateDisplayName(control: AbstractControl): any {
    console.log("RegisterComponent validateDisplayName - ENTRY");
    if(control.value.length >= 3) {
        return this.authService.validateDisplayName(control.value).then( 
            (res) => {
                console.log("RegisterComponent validateDisplayName - res: " +res);
                if(res) {
                    console.log("RegisterComponent validateDisplayName - displayName already used");
                    return { displayNameTaken: true };              
                } else {
                    console.log("RegisterComponent validateDisplayName - - displayName can be used");
                    return null;
                }
            },
            (err) => {
                console.log("RegisterComponent validateDisplayName - err: " +err);
                return { displayNameTaken: true };                            
            });
    }
    console.log("RegisterComponent validateDisplayName - ############## EXIT");
    return { displayNameTaken: true }; 
}

component-service.ts

public validateDisplayName(displayName: string) {
    console.log("AuthService validateDisplayName - displayName: " +displayName);  
    return this.http
        .get(environment.server_url +"profile_cont/displaynameexists/" +displayName +"/")
        .toPromise()
        .then(
            (response) => {
                const existsBool = response.json();
                console.log("AuthService validateDisplayName - existsBool: " +existsBool);            
                return existsBool;          
            },
            (error) => {
                console.log("AuthService validateDisplayName - error: " +error);  
                return true;          
    });
}

component.html

    <form [formGroup]="dnFormGroup">
    <fieldset>
        <div class="row">
            <section class="col col-6">
                <label class="input">
                <i class="icon-append fa fa-user"></i>
                <input formControlName="displayName" type="text" minlength="3" maxlength="10" placeholder="Display name">
                <b class="tooltip tooltip-top-right"> <i class="fa fa-user txt-color-teal"></i> Please provide a 3 to 10 char name for site display purposes.</b>
                </label>
                <div *ngIf="dnFormGroup.get('displayName').hasError && dnFormGroup.get('displayName').hasError('displayNameTaken')">
                    Display Name is already used
                </div>
            </section>
        </div>
    </fieldset>
</form>

谢谢鲍勃

Answer 1

ansync验证器必须是第三个参数，请尝试：

this.dnFormGroup = this.formBuilder.group({
    displayName: ['', null, this.validateDisplayName.bind(this)]
});