如何在Ui-Grid Angularjs中添加独立单元格验证

我试图验证ui网格中可编辑单元格的值并显示错误。如Required、Max-Length、Min-Length等

<!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>

您可以使用列的columnDef的editableCellTemplate属性来创建您自己的html模板，用于使用所需的验证进行单元格编辑。使用自定义单元格模板的单元格验证示例:

{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>"}

更新了显示错误信息的plunker : plunker

要对所有列进行验证，必须对每个列使用相同的editableCellTemplate。

相关内容

最新更新

热门标签：