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

Question

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

在这个例子中，下面的方法是触发类型Editors.text而不是Editors.singleSelect类型。

组件.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);
        }

组件.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

Answer 1

请注意，我是 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% 时将显示此警报。