How to add Individual Cell Validation in Ui-Grid Angularjs

问题

I am trying to validate a value of an editable cell in ui grid and display the error. For example Required, Max-Length, Min-Length and etc.

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

<div ng-controller="MainCtrl">
  <div id="grid1" ui-grid="gridOptions" class="grid" ui-grid-edit ui-grid-cellnav></div>
  <br/>
  <br/>
  <button class="btn btn-default" ng-click="addUser()">Add row</button>
</div>


    <script src="app.js"></script>
  </body>
</html>

回答1:

you could use the property editableCellTemplate of the the columnDef of your column to create your own html template for cell edit with the needed validations. Example of cell validation with custom cell template :

{field: 'company', displayName: 'Company', enableColumnMenu: false,editableCellTemplate:
        "<div><form name=\"inputForm\"><input type=\"INPUT_TYPE\" ng-class=\"'colt' + col.uid\" ui-grid-editor ng-model=\"MODEL_COL_FIELD\"  minlength=3 maxlength=10 required></form></div>"}

Updated pluncker with displaying the error message : pluncker

to do the validation for all columns, you have to use the same editableCellTemplate for each column.

来源：https://stackoverflow.com/questions/32971767/how-to-add-individual-cell-validation-in-ui-grid-angularjs

标签

angularjs

angular-ui-grid