2017-08-09 13 views
3

サーバー側の検証メッセージをレンダリングするための正しいアプローチだが、私は角度でこのフォームを持っているとしましょう:角度:

もちろんのWebサービスがなければならないなど、省のためのウェブサービス、更新、に提出され
<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> 

入力が正しいことを確認し、問題がある場合に備えていくつかの検証メッセージを返します。のは、私は、フォームをPOSTし、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または何らかのものを使用してリフレッシュする必要があります。しかし、私はこの権利を感じない。このような状況を解決するための "鋭い"アプローチはありますか?

答えて

0

私はいくつかのアップフォートを手に入れているので、誰かがこれを苦労している場合に備えて、私が作った解決策がここにあります。

バリデーターを使用するのではなく、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%正確ではありません。