如何在 IgGrid 單元格 (Infragistics) 中獲取正則表達式？

Question

如何在 igGrid 更新中的 igTextEditor 上使用正則表達式？

我嘗試使用驗證選項，但沒有用。

   $("#schedulerTable").igGrid({
            columns: $scope.schedulerColumns,
            width: "87%",
            height: "300px",
            fixedHeaders: true,
            autoGenerateColumns: false,
            autofitLastColumn: true,
            autoCommit: true,
            renderCheckboxes: true,
            responseDataKey: "results",
            dataSource: $scope.schedulerData,
            updateUrl: "",
            primaryKey: 'Id',
            features: [
            {
                name: "Updating",
                generatePrimaryKeyValue: function (evt, ui) {
                    nextPrimarykey -= 1;
                    ui.value = nextPrimarykey;
                },
                enableAddRow: true,
                enableDeleteRow: true,
                editMode: "row",
                columnSettings: [
                   {
                       columnKey: "Id",
                       editorType: "numeric",
                       editorOptions: {
                           readOnly: true
                       }
                   }, {
                       columnKey: "Time",
                       editorType: "text",

                       editorOptions: {
                       },
                       validatorOptions: {
                           regExp: /^[a-zA-Z]{1}[a-zA-Z0-9_\.\-]*\@\w{2,10}\.\w{1,10}$/,
                           onblur: true,
                           onchange: true
                       },

                       required: true,
                       validation: true,
                       defaultValue: "00:00"
                   },
                   {
                       columnKey: "Mo"

                   },
                   {
                       columnKey: "Tu"

                   },
                    {
                        columnKey: "We"

                    },
                    {
                        columnKey: "Th"

                    },
                    {
                        columnKey: "Fi"

                    }]
            }]
        });

我想在時間列中實現一個時間選擇器，但它不存在，所以我嘗試通過正則表達式在 textEditor 中只獲取時間。 網格加載了名為 Time、Mo-Friday 的列。 如果您點擊添加網格，您可以點擊輸入字段並填寫您的時間。 在單擊完成之前應該驗證時間並顯示錯誤消息。

查看表格的樣子： https : //codepen.io/ablablabla/pen/PJLbJz

Answer 1

缺乏驗證是因為validatorOptions屬於editorOptions （因為它們會傳遞給您選擇作為提供者的任何編輯器）。 validation: true只獲得一些默認值，除了必需的之外，對於文本字段來說真的不會做太多。

然后 RegExp 選項（據我所知，用於上面代碼段中的電子郵件）自 15.2 以來一直是pattern :) 所以最后你可以嘗試：

//...
    editorOptions: {
     validatorOptions: {
       pattern: /^\d{1,2}\:\d{2}$/,
       onblur: true,
       onchange: true
     },
    },
//..

這是一個更新的代碼筆： https ://codepen.io/anon/pen/YrgYxj

編輯：或者如果你想設置錯誤信息：

//...
    editorOptions: {
     validatorOptions: {
       pattern: {
        expression: /^\d{1,2}\:\d{2}$/,
        errorMessage: "Time should match a pattern like 00:00"
       },
       onblur: true,
       onchange: true
     },
    },
//..

根據您的目標，您還可以使用遮罩編輯器或日期編輯器作為提供程序。 還有強制性文檔鏈接： https : //www.igniteui.com/help/iggrid-updating

PS綁定到一個空數組以避免第一行沒有值更重要的是主鍵的錯誤。