bixi/packages/core/editable-table/demo/save-validator.md

企业级中后台前端解决方案

---
title:
  zh-CN: 高级校验
order: 14
---

## zh-CN

在编辑表格校验时，更多的时候会根据上下文去确认数据是否合法，此时 `editable-table` 也提供了相应的配置去限制。

## en-US


```ts
import { Component } from '@angular/core';
import { FormGroup, Validators } from '@angular/forms';
import { NzMessageService } from 'ng-zorro-antd/message';
import { EEditableColType, IEditableRow } from '@bixi/core/editable-table';

@Component({
  selector: 'bixi-editable-demo-save',
  template: `
    <bixi-editable-table [(ngModel)]="rows" [cols]="cols" [validate]="editValidator"></bixi-editable-table>
  `
})
export class TestComponent {

constructor(
  private msg: NzMessageService
) {}

  cols = [
    {
      key: 'first',
      name: '第一列'
    },
    {
      key: 'second',
      name: '第二列(长于第一列)'
    },
    {
      key: 'third',
      name: '第三列(长度介于第一第二列之间)',
      options: [
        {
          name: 'carl',
          value: 'carl'
        },
        {
          name: 'lucy',
          value: 'lucy'
        }
      ],
      type: EEditableColType.select
    },
    {
      key: 'fouth',
      name: '第四列(列唯一值)',
      validators: [Validators.required],
      options: [
        {
          name: 'carl',
          value: 'carl'
        },
        {
          name: 'lucy',
          value: 'lucy'
        }
      ]
    }
  ];
  rows = [
    {
      first: 'hello',
      second: 'test long long long long long long long long text ',
      third: 'lucy',
      fouth: 'carl'
    }
  ]

  // 列不重复
  editValidator(fg: FormGroup, rows: IEditableRow[], row: IEditableRow) {
    const control1 = fg.get('first')?.value || '';
    const control2 = fg.get('second')?.value || '';
    const control3 = fg.get('third')?.value || '';

    // 长度长于第一列
    if (control2.length < control1.length) {
      fg.get('second')?.setErrors({
        message: 'too short'
      })
    }
    // 长度介于第一第二列之间
    if (!(control3.length > control1.length && control3.length < control2.length)) {
      fg.get('third')?.setErrors({
        message: 'value length'
      })
    }
    // 列不重复
    const target = rows.filter((r) => r.fouth === row.fouth);
    if (target && target.length > 1) {
      fg.get('fouth')?.setErrors({
        message: 'multi row value'
      })
    }
    if (fg.invalid && this.msg) {
      this.msg.warning('校验失败');
    }
  }
}
```