0

我有一个使用 ui.grid 的 AngularJS 应用程序。我想在编辑单元格时启用并显示验证错误。我相信这可以通过“editableCellTemplate”来实现。

这是我$scope.gridOptions.columnDefs的可编辑单元格中的内容：

{ 
  field: 'label',
  enableCellEdit: true,
  editableCellTemplate: 
    '<input type="text" ng-class="\'colt\' + col.index" ng-input="COL_FIELD" ng-model="COL_FIELD" name="label" ng-minlength="3" ng-maxlength="10" required />' +
    '<span class="error" ng-show="label.$error.minlength">Too short!</span>'
  },

因此，正如上面可能显而易见的那样，我不确定如何将跨度链接ng-show到我的单元格的编辑输入。使用 Inspect Element 我可以看到ng-invalid-minlength该类被添加到 中input，并且单元格确实变成了红色。所以验证正在触发；我看不到显示的跨度。我该如何展示它？

4

2 回答 2

2

使用 ui-grid 3.0 RC19，editableCellTemplate 方法是正确的。我建议您直接从 ui-grid.js 复制，其中定义了 'ui-grid/cellEditor' $templateCache：

   $templateCache.put('ui-grid/cellEditor',
       "<div><form name=\"inputForm\"><input type=\"INPUT_TYPE\" ng- class=\"'colt' + col.uid\" ui-grid-editor ng-model=\"MODEL_COL_FIELD\"></form> </div>");

然后，修改它以将其包含在您的代码中：

   { 
      field: 'label',
      enableCellEdit: true,
      editableCellTemplate: 
      "<div><form name=\"inputForm\"><input type=\"INPUT_TYPE\" ng-class=\"'colt' + col.uid\" ui-grid-editor ng-model=\"MODEL_COL_FIELD\" name=\"label\" ng-minlength=\"3\" ng-maxlength=\"10\" required validate-required-cell></form></div><span class=\"error\" ng-show=\"inputForm.$valid\">Too short!</span>"
    },

在我的情况下，我需要一个名为 validateRequiredField 的附加指令来在元素失去焦点时停止单元格关闭：

  angularStartDirectives.directive('validateRequiredCell', function(uiGridEditConstants) {
    return {
        restrict: 'A',
        scope: false,
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {

            element.bind('blur', function(evt) {

              if (scope.inputForm && !scope.inputForm.$valid) {

                // Stops the rest of the event handlers from being executed
                evt.stopImmediatePropagation();
              }

            });

        }
    };
});

您还可以包括这样的样式：

  form input.ng-invalid {

      border-color:red;
  }

  form input.ng-valid {

     border-color: transparent;
  }

进一步改进的参考：

UI 网格验证

于 2015-02-12T18:40:58.013 回答
2

在 Aquiles 的代码中有一个小的打字错误。如果没有错误，则应显示错误消息。

它应该是这样的：

ng-show=\"!inputForm.$valid\"

（这是对 Aquiles 答案的回复，但我缺少直接评论的声誉）

问候：马卡里乌斯

于 2015-06-04T12:22:08.747 回答