首页 文章

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

提问于
浏览 次
0

我试图找出如何将一些数据发送到服务器端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 这样的嵌套数组字段要复杂得多，以编程方式更新错误 . 任何想法，将不胜感激 .

validation angular angular2-forms

1 回答

  • 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 错误并将其显示在控件的工具提示中 .

    回复于

相关问题