角：正确的渲染服务器端验证消息的方法

Question

比方说，我有这样的形式，角度：

<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." 
    ] 
} 

这是我不清楚应该怎么处理角这种情况。大部分的信息四处建议编写自定义的验证，会做一个异步验证对服务器，例如：

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的想法，再加上必须在我的角度项目。

一种可能的解决方案，我想通了，是在我的组件保存在服务器错误对象作为一个属性，则有一个角验证器检查阉的特定字段具有错误消息：

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

然后力验证器使用updateValueAndValidity或某种事物进行刷新。但我不觉得这是正确的。是否有一种“棱角分明”的方法来解决这种情况？

Answer 1

由于我已经收到了一些upvotes，以防万一任何人正在努力通过这个，这里是我制定的解决方案。

我没有使用验证器，而是使用setError方法手动触发控件上的验证错误（在我的理解中，这基本上是一个验证器的工作）。

因此，在我的组件中，我将迭代服务器的响应以确定每个字段是否存在错误。我想你可以通过很多方式来确定它，这取决于你的网络服务是如何设计的。在我的情况下，如果控件的名称出现在服务器返回的错误字典中，则会出现错误。如果是这样，我旗匹配表单控件为“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％正确的。