首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在Ui中添加单个单元验证

如何在Ui中添加单个单元验证
EN

Stack Overflow用户
提问于 2015-10-06 13:50:50
回答 1查看 7.6K关注 0票数 1

我正在尝试验证ui网格中可编辑单元格的值并显示错误。例如RequiredMax-LengthMin-Length等。

代码语言:javascript
运行
复制
<!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>

EN

回答 1

Stack Overflow用户

发布于 2015-10-06 14:51:23

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

代码语言:javascript
运行
复制
{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>"}

更新了显示错误消息普朗克的pluncker

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

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/32971767

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档