Angular Slickgrid-customValidator不适用于SingleSelect编辑器

如何解决Angular Slickgrid-customValidator不适用于SingleSelect编辑器

目前，我为angular-slickgrid启用了单元格的Editors.singleSelect内联编辑器。我想根据某些条件验证所选的下拉值。我引用了this示例来创建自定义验证器，但没有收到警告消息。

在此example中，以下方法针对Editors.text而不是Editors.singleSelect类型触发。

component.ts

        itemValidator: EditorValidator = (value: any,args: EditorArgs) => {
            // you can get the Editor Args which can be helpful,e.g. we can get the Translate Service from it
            const grid = args && args.grid;
            const gridOptions = (grid && grid.getOptions) ? grid.getOptions() : {};
            const translate = gridOptions.i18n;
        
            // to get the editor object,you'll need to use "internalColumnEditor"
            // don't use "editor" property since that one is what SlickGrid uses internally by it's editor factory
            const columnEditor = args && args.column && args.column.internalColumnEditor;
        
            // random condition check
            const items = ['item1','item2','item3'];
            if (items.includes(value)) {
                return { valid: false,msg: 'Invalid item' };
            }
            return { valid: true,msg: '' };
        };
    ......
    // ----------------Column definition----------------------------
    {
        id: 'item',name: 'Item',field: 'item',sortable: true,filterable: true,editor: {
            model: Editors.singleSelect,collection: [
                {value: 'item1',label: 'Item 1'},{value: 'item2',label: 'Item 2'},{value: 'item3',label: 'Item 3'},{value: 'item4',label: 'Item 4'},{value: 'item5',label: 'Item 5'},{value: 'item6',label: 'Item 6'},{value: 'item7',label: 'Item 7'},],validator: this.itemValidator
        }
    }
    ........

    // ----------------Prompting alert if any error----------------------------
        onValidationError(e,args) {
            alert(args.validationResults.msg);
        }

component.html

    <angular-slickgrid gridId="dataGrid" (onAngularGridCreated)="angularGridReady($event)"
        (sgOnBeforeEditCell)="onCellBeforeEditCell($event.detail.eventData,$event.detail.args)"
        (sgOnBeforeCellEditorDestroy)="onAfterEditCell($event.detail.eventData,$event.detail.args)"
        (sgOnValidationError)="onValidationError($event.detail.eventData,$event.detail.args)"
        [columnDefinitions]="colDefn" [gridOptions]="gridOptions"
        [dataset]="dataset" [gridHeight]="gridHeight" >
    </angular-slickgrid>

如果我将编辑器类型从Editors.singleSelect更改为Editors.text，则其验证将按预期进行。

解决方法

请注意，我是Angular-Slickgrid的作者，该错误现已在新版本2.21.3下修复。

以下代码现在有效

prepareGrid() {
  this.columnDefinitions = [
    {
        id: 'complete',name: '% Complete',field: 'percentComplete',type: FieldType.number,editor: {
          model: Editors.singleSelect,validator: (value,args) => {
            if (value < 50) {
              return { valid: false,msg: 'Please use at least 50%' };
            }
            return { valid: true,msg: '' };
          }
        }
    }
  ];
}

onValidationError(e,args) {
    if (args.validationResults) {
      alert(args.validationResults.msg);
    }
}

当我选择的值低于50％时将显示此警报。