Angular UI Grid validation without edit

Question

I created a UI Grid with validations. I append an empty row for the user to fill out. It looks like the validations only happen on edit. It seems valid that the empty row is not flagging validations from the start because the user has not had any interactions with the cell yet - however if a user starts to edit a cell - but then decides not to - the validations still do not take place.

There are two scenarios I would like to support:

1. An empty 'new' row
   • No visual validation failures
   • User starts an edit - but then clicks away without making any changes
   • Validation failures are visible
2. An existing row that is invalid
   • Load data with that doesn't pass validations
   • Validation failures are immediately visible without any user interaction

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

To support the second senario you should to add a custom onRegisterApi listener in which add on rows rendered listener then run validators for each row rendered like this :

   $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

You can set the invalid status manually if you need to do it for new or existing rows.

uiGridValidateService.setInvalid(dataRow, coldef);

You can get the colDef using:

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

Answer 3

This is similar to Afifa's answer, but higher performance when many of your columns aren't validated:

Add the following to your 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);
            });