Angular：用於呈現服務器端驗證消息的正確方法

Question

假設我在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."
    ]
}

我不清楚角度應如何處理這種情況。 大多數信息建議編寫一個自定義驗證器，對服務器進行異步驗證，例如：

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或某種東西強制驗證器刷新。 但我覺得這不對。 是否有一種“棱角分明”的方法來解決這種情況？

Answer 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％正確。