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

Posted 2023-03-22

【中文标题】如何在 Angular 2+ 中添加自定义验证

【英文标题】：How to add custom validations for handsontable in angular 2+

【发布时间】：2019-07-11 12:55:25

【问题描述】：

我在 Angular 6 中使用 handsontable。

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

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

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

提前致谢:)

【参考方案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 以加载验证