Question

我试图找出如何将一些数据发送到服务器端API调用，让它进行验证，然后返回一些验证错误，那些验证错误应该与导致验证的组件一起显示错误。以下是我的数据模型的样子：

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

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

export class Item {
    recNo: string;
}

这就是HTML表单的样子

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

我从服务器收到的验证错误是以这种形式

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

我无法弄清楚，一旦收到验证错误，我是否可以更新表单控件上的错误对象或填充其他结构以显示错误。对于像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错误并将其显示在控件的工具提示中。

角度2表单的服务器端验证

1 个答案: