Question

我创建了一个带验证的UI网格。我添加一个空行供用户填写。看起来验证仅在编辑时发生。似乎有效的是，空行不会从一开始就标记验证，因为用户尚未与该单元进行任何交互 - 但是如果用户开始编辑单元格 - 但随后决定不进行 - 则验证仍然不会发生

我想支持两种情况：

一个空洞的＆＃39;新的＆＃39;行
- 无视觉验证失败
- 用户开始编辑 - 但点击后不做任何更改
- 验证失败可见
无效的现有行
- 加载数据但没有通过验证
- 无需任何用户交互即可立即看到验证失败

Plunker：http://plnkr.co/edit/cb9Vb9b4iTC8z4haahbL?p=preview

  $scope.gridOptions.columnDefs = [
    { name: 'id',
      enableCellEdit: false,
      width: '10%'
    },
    { name: 'name',
      displayName: 'Name',
      width: '20%', 
      validators: {
        required: true,
        startWith: 'M'
      },
      cellTemplate: 'ui-grid/cellTitleValidator'
    },
    { name: 'gender',
      displayName: 'Gender',
      width: '20%', 
      validators: {
        required: true
      },
      cellTemplate: 'ui-grid/cellTitleValidator'
    }
  ];

Answer 1

要支持第二个senario，您应该添加一个自定义的onRegisterApi侦听器，在该侦听器中添加行呈现的侦听器，然后为每个呈现的行运行验证器：

   $scope.gridOptions.onRegisterApi = function (gridApi) {
    //set gridApi on scope
    $scope.gridApi = gridApi;
    $scope.gridApi.core.on.rowsRendered($scope, function () {
        $interval(function () {
            var rowsRendred = $scope.gridApi.grid.renderContainers.body.renderedRows;
            rowsRendred.forEach(function (row) {
                row.grid.options.columnDefs.forEach(function (colDef) {
                    $scope.gridApi.grid.validate.runValidators(row.entity, colDef, row.entity[colDef.field], NaN, $scope.gridApi.grid);
                });
            });
        }, 500, 1);
    });
};

Answer 2

如果您需要为新行或现有行执行此操作，则可以手动设置无效状态。

uiGridValidateService.setInvalid(dataRow, coldef);

您可以使用以下方式获取colDef：

$scope.gridApi.grid.getColDef("columnName")

Answer 3

这类似于Afifa的答案，但是当您的许多列未经过验证时性能更高：

将以下内容添加到onRegisterApi：

 $scope.gridApi.core.on.rowsRendered($scope, function () {
                $interval(function () {
                    var rowsRendred = 
    $scope.gridApi.grid.renderContainers.body.renderedRows;
                    var validatedColumns = [];
                    rowsRendred[0].grid.options.columnDefs.forEach(function (colDef) {
                        if (typeof (colDef.validators) != 'undefined') {
                            validatedColumns.push(colDef);
                        }
                    });
                    rowsRendred.forEach(function (row) {
                        validatedColumns.forEach(function (colDef) {

 $scope.gridApi.grid.validate.runValidators(row.entity, colDef, row.entity[colDef.field], NaN, $scope.gridApi.grid);
                        });
                    });
                }, 500, 1);
            });

没有编辑的Angular UI Grid验证

3 个答案: