如何在 Angular 2+ 中添加自定义验证答案

【问题标题】：How to add custom validations for handsontable in angular 2+如何在 Angular 2+ 中添加自定义验证
【发布时间】：2019-07-11 12:55:25
【问题描述】：

我在 Angular 6 中使用 handsontable。

我尝试了添加自定义验证的代码，该验证显示在我的 Angular 6 组件的官方文档中，但它不起作用。

我搜索了几个网站，但没有找到任何一个示例来说明如何在 Angular 2+ 版本中为 handsOntable 添加自定义验证

谁能告诉我如何在 Angular 2+ 版本中注册自定义验证

提前致谢:)

【问题讨论】：

标签： javascript angular angular6 handsontable

【解决方案1】：

为电子邮件创建了一个示例自定义验证器并能够设置为一列

emailValidator = (value, callback) => {
  console.log(value)
  setTimeout(function(){
    if (/.+@.+/.test(value)) {
      callback(true);
    }
    else {
      callback(false);
    }
  }, 1000);
};

private columns: any[] = [
{
  data: 'name'
},
{
  data: 'email',
  validator: this.emailValidator,
  // Uncomment below line accept invalid input and indicate
  // allowInvalid: true
}
];

@ViewChild(HotTableComponent) hotTableComponent;
// Call validator after initialization
afterInit() {  this.hotTableComponent.getHandsontableInstance().validateCells(function(valid){});

afterInit 是一个事件发射器

<hot-table [data]="data"
       [colHeaders]="colHeaders"
       [columns]="columns"
       [options]="options"
       (hotInstanceCreated)="instanceCreated($event)"
       (afterInit)="afterInit(event$)"
       [colWidths]="colWidths">

https://stackblitz.com/edit/angular-kjmvq4?file=app%2Fapp.component.ts

【讨论】：

这行得通，但是您知道如何在加载表格时默认验证所有单元格，而不是在编辑单元格时验证吗？
是的，这目前可以通过在 hotTable 实例上调用 validateCells 来实现，但请注意 github.com/handsontable/handsontable/issues/5283 已更新 answer/stackblitz 以加载验证