角度2フォームのサーバー側の検証

Question

サーバー側のAPI呼び出しにデータを送信し、検証を行い、いくつかの検証エラーで戻ってそれらの検証エラーを表示する方法を理解しようとしています検証エラーの原因となったコンポーネントと比較します。これは、HTMLフォームは、私は、サーバーから受け取った検証エラーがこのフォーム

[ 
    { 
    "field": "orderNo", 
    "message": "order number is required" 
    }, 
    { 
    "field": "items[2].recNo", 
    "message": "record number is required" 
    } 
] 

である

<div class="form-group"> 
    <label name="orderNo">Order Number</label> 
    <input type="text" formControlName="orderNo" /> 
</div> 

<div formArrayName="items"> 
    <div *ngFor="let item of orderForm.controls.items.controls; let i=index" [formGroupName]="i"> 
     <div class="form-group"> 
      <label>Item # {{i}}</label> 
      <input type="text" formControlName="recNo" /> 
     </div> 
    </div> 
</div> 

どのように見えるかです

export class Order { 
    orderNo: string; 
    items: Item[]; 

    constructor() { 
     this.items = []; 
    } 
} 

export class Item { 
    recNo: string; 
} 

：ここに私のデータモデルがどのように見えるかです

私は検証エラーを受け取ったら、フォームコントロールのエラーオブジェクトを更新したり、エラーを表示するために他の構造を設定したりすることができます。 orderNoのような静的フィールドの場合は少しシンプルですが、items[0].recNoのようなネストされた配列フィールドの方がはるかに複雑でプログラム的にエラーを更新します。任意のアイデアをいただければ幸いです。

Answer 1

これは私がやってしまったものです：

基本的に

<div class="form-group" [class.has-danger]="!ctrl.valid && ctrl.enabled"> 
    <input type="text" class="form-control" [formControl]="ctrl" 
     value="{{valueFormatter(ctrl)}}" 
     [class.form-control-danger]="!ctrl.valid && ctrl.enabled" 
     [ngbTooltip]="ctrl.errors ? ctrl.errors.e : falsy" /> 
</div> 

、ctrl有効/エラー状態に基づいており、ここでは制御上のエラーを指定する例であるフォームコントロールにエラークラスを設定します：

this.ctrl.setErrors({ "e": this.label + " is required"}); 

エラーを表示するには、あらかじめ定義されたエラーキーeを使用しました。このようにして、バックエンドからエラーリストを受け取ったら、コントロールのeエラーを設定し、コントロールのツールチップにそのエラーを表示させることができます。