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

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

---
title:
  zh-CN: 支持校验
order: 13
---

## zh-CN

支持编辑校验，校验规则同 [ValidatorFn](https://angular.cn/api/forms/ValidatorFn), 同时可以支持自定义规则。

## en-US


```ts
import { Component } from '@angular/core';
import { Validators, FormControl } from '@angular/forms';

@Component({
  selector: 'bixi-editable-demo-use',
  template: `
    <bixi-editable-table [(ngModel)]="rows" [cols]="cols"></bixi-editable-table>
  `
})
export class TestComponent {
  cols = [
    {
      key: 'text',
      name: '无任何校验'
    },
    {
      key: 'after',
      name: '不可为空',
      validators: [Validators.required]
    },
    {
      key: 'before',
      name: '长度不长于 5',
      validators: [this.customerValidator],
    }
  ];
  rows = [
    {
      text: 'hello',
      after: '',
      before: 'lucy'
    },
    {
      text: 'tommrow',
      after: 'lucy',
      before: 'python'
    }
  ]

  customerValidator(fc: FormControl) {
    if (fc.value && fc.value.length > 5) {
      return {
        toolong: true
      };
    }
    return {};
  }
}
```