bixi/packages/core/editable-table/demo/edit-template-with-validator.md

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

---
title:
  zh-CN: 自定义模版校验
order: 16
---

## zh-CN

通过 `template` 方式自定义编辑模版的数据校验

## en-US

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

@Component({
  selector: 'bixi-editable-demo-type',
  template: `
    <bixi-editable-table [(ngModel)]="rows" [cols]="cols" #editableTable [validate]="editValidator">
      <ng-template bixi-editable-col='inputRef' let-row let-formGroup="formGroup">
        <ng-container *ngIf="row.type === 'net'">
          <nz-input-group nzAddOnBefore="Http://" nzAddOnAfter=".com">
            <input type="text" nz-input [(ngModel)]="row.net" (ngModelChange)="onChange($event, 'net', formGroup)"/>
          </nz-input-group>
        </ng-container> 
        <ng-container *ngIf="row.type === 'input'">
          <input nz-input placeholder="Basic usage" [(ngModel)]="row.input" (ngModelChange)="onChange($event, 'input', formGroup)"/>
        </ng-container>
      </ng-template>
    </bixi-editable-table>
  `
})
export class TestComponent {
  @ViewChild('editableTable') editableTable: BixiEditableTableComponent;

  constructor(
    private msg: NzMessageService
  ) {}
  
  cols = [
    {
      key: 'type',
      name: '联动下一列',
      type: EEditableColType.select,
      options: [
        {
          name: '网站选择',
          value: 'net'
        },
        {
          name: '输入框',
          value: 'input'
        }
      ]
    },
    {
      key: 'name',
      name: '自定义模版（内容不长于5）',
      type: EEditableColType.template,
      validators: [Validators.required],
      ref: 'inputRef'
    }
  ];
  rows = [
    {
      type: 'net',
      input: 'hello',
      net: 'datagrand',
      name: 'datagrand'
    }
  ];

  onChange(value: string, key: string, formGroup: FormGroup) {
    console.log('key', key);
    formGroup.patchValue({
      name: value
    })
    formGroup.markAsDirty();
  }

  editValidator(fg: FormGroup) {
    const name = fg.get('name')?.value || '';
    // 长度长于第一列
    if (name.length > 5) {
      fg.get('name')?.setErrors({
        message: 'too long'
      })
    }
    if (this.msg) {
    this.msg.warning('校验失败');
    }
  }
}
```