Angular 5 FormGroup 验证程序 Web 服务结果未触发 ngIF hasError

Question

我有一个自定义 FormGroup 验证器，在从检查 displayName 是否已被使用的 Web 服务调用返回后，它无法正确更新验证器错误状态。

在下面的代码中，我知道我的 html 代码正在运行，因为当 displayName 输入为空时，我的组件的 validateDisplayName 函数显示 "Display Name is already used"。然后，当您开始键入字母时，调用 Web 服务以开始验证第三个字母上的条目 - 然后消息消失，当我键入与数据库中的一个匹配的 displayName 时，Web 服务正确返回 true，但是 return { displayNameTaken: true };调用不会导致错误显示。

我知道这与网络服务returns的Promise有关，但我想不出解决方案。

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 }; 
}

分量-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)]
});

Angular 5 FormGroup 验证程序 Web 服务结果未触发 ngIF hasError

Angular 5 FormGroup validator web service result not triggering ngIF hasError

javascript

angular

angular-forms