Angular：呈现服务器端验证消息的正确方法答案

【问题标题】：Angular: Correct approach for rendering server side validation messagesAngular：呈现服务器端验证消息的正确方法
【发布时间】：2018-01-17 01:22:26
【问题描述】：

假设我在 Angular 中有这个表单：

<form [formGroup]="form">
    <md-input-container>
        <input mdInput formControlName="name" [(ngModel)]="dummy.name" name="name">
        <md-error *ngIf="form.controls.name.hasError('required')">This is required</md-error>
    </md-input-container>
    <md-input-container>
        <input mdInput formControlName="email" [(ngModel)]="dummy.email" name="email">
        <md-error *ngIf="form.controls.email.hasError('invalid_format')">The email is not valid</md-error>
    </md-input-container>
</form>

提交给 Web 服务进行保存、更新等。Web 服务当然必须检查输入是否正确，并在出现任何问题时返回一些验证消息。假设我发布表单并在 JSON 字典中获取这些验证错误：

{
    "name": [
        "Middle names are not allowed."
    ],
    "email": [
        "The email already exists."
    ]
}

我不清楚 Angular 应该如何处理这种情况。周围的大多数信息都建议编写一个自定义验证器，该验证器将对服务器进行异步验证，例如：

uniqueEmailValidator(control: Control): {[key: string]: any} {
    return new Promise (resolve => {
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');
        this.http.get('http://webservice.com/email/unique/', {headers:headers})
            .map(res => res.json())
            .subscribe(data => {
                if(data != null) {
                    resolve({"duplicate": true})
                }
                else resolve(null);      
            })
        });
    });
}

现在，这意味着我应该为表单中可能存在的每条数据提供一个特定的 Web 服务。虽然这在某些特定情况下可能有意义（例如唯一的电子邮件/用户名验证），但我不喜欢在我的 Web API 中填充大量只会执行验证任务的服务，然后必须在我的角度项目。

我想出的一个可能的解决方案是将我的组件中的服务器错误对象保存为一个属性，然后有一个 Angular 验证器来检查特定字段是否有错误消息：

public checkServerErrorMessage(control: FormControl):{[key: string]: boolean}{
    if("name" in this.serverErrors){
        return { serverValidationError: true };
    }
    return {};
}

然后强制验证器使用 updateValueAndValidity 或某种东西进行刷新。但我觉得这不对。有没有一种“棱角分明”的方法来解决这种情况？

【问题讨论】：

标签： javascript angular validation angular-forms

【解决方案1】：

由于我得到了一些支持，以防万一有人为此苦苦挣扎，这是我提出的解决方案。

我最终没有使用验证器，而是使用 setError 方法在控件上手动触发验证错误（在我的理解中，这基本上是验证器会做的事情）。

因此，在我的组件中，我将遍历服务器的响应以确定每个字段是否存在错误。我想您可以通过多种方式确定这一点，这取决于您的 Web 服务是如何设计的。就我而言，如果控件的名称出现在服务器返回的错误字典中，则会出现错误。如果是这样，我将匹配的表单控件标记为“serverValidationError”（或者您想调用它）：

for(var key in serverResponse["errors"]) { 

    this.serverErrors[key] = serverResponse["errors"][key]
    this.form.controls[key].setErrors({serverValidationError: true});

}

“serverErrors”将存储来自服务器的消息以显示在模板上。

然后在模板中，我检查该错误：

<form [formGroup]="form">
    <md-input-container>
        <input mdInput formControlName="name" [(ngModel)]="dummy.name" name="name">
        <md-error *ngIf="form.controls.name.hasError('serverValidationError')">{{ serverErrors["name"] }}</md-error>
    </md-input-container>
    <md-input-container>
        <input mdInput formControlName="email" [(ngModel)]="dummy.email" name="email">
        <md-error *ngIf="form.controls.email.hasError('serverValidationError')">{{ serverErrors["email"] }}</md-error>
    </md-input-container>
</form>

不知道这是否是最好的解决方案，但至少是我能想到的最好的。

PS：我都是凭记忆写的，所以代码可能不是 100% 正确的。

【讨论】：