Serverseitige Validierung für angular 2 Formen

Question

Ich versuche herauszufinden, wie ich einige Daten an eine serverseitige API-Aufruf senden kann, lassen Sie die Validierung und dann zurück mit einigen Validierungsfehlern und diese Validierung Fehler sollten angezeigt werden mit der Komponente, die den Validierungsfehler verursacht hat. Hier ist, wie meine Datenmodell wie folgt aussieht:

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

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

export class Item { 
    recNo: string; 
} 

Dies ist, wie das HTML-Formular sieht aus wie

<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> 

Die Validierungsfehler, die ich vom Server erhalten, sind in dieser Form

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

Ich kann nicht herausfinden, wie ich nach dem Erhalt der Validierungsfehler die Fehlerobjekte in den Formularsteuerelementen aktualisieren oder eine andere Struktur auffüllen kann, um die Fehler anzuzeigen. Es ist ein bisschen einfacher für statische Felder wie orderNo, aber viel komplexer für geschachtelte Array-Felder wie items[0].recNo, um die Fehler programmgesteuert zu aktualisieren. Irgendwelche Ideen würden geschätzt werden.

Answer 1

Dies ist, was ich am Ende tun:

<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> 

Grundsätzlich auf dem ctrl Zustand gültig/Fehler beim Einrichten des Steuerfehlerklassen auf dem Formular basiert und hier ist ein Beispiel für eine Steuerung einen Fehler festgelegt wird:

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

I verwendet nur eine vordefinierte Fehlerschlüssel e Fehler anzuzeigen. Auf diese Weise kann ich den Fehler e auf einem Steuerelement festlegen, sobald ich die Fehlerliste vom Back-End erhalte, und dies wird in einem Tooltip auf dem Steuerelement angezeigt.