如何添加单个细胞中的验证UI网格Angularjs [英] How to add Individual Cell Validation in Ui-Grid Angularjs
问题描述
我想验证在UI网格可编辑单元格的值并显示错误。例如要求，最大长度，最小长度等。
＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML NG-应用=应用程序＆GT;\r
＆LT; HEAD＆GT;\r
＆所述; SCRIPT SRC =http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =http://ui-grid.info/docs/grunt-scripts/csv.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =http://ui-grid.info/docs/grunt-scripts/pdfmake.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =http://ui-grid.info/release/ui-grid.js＆GT;＆下; /脚本＆GT;\r
＆LT;链接rel =stylesheet属性HREF =http://ui-grid.info/release/ui-grid.css类型=文/ CSS＆GT;\r
＆LT;链接rel =stylesheet属性HREF =的main.css类型=文/ CSS＆GT;\r
＆LT; /头＆GT;\r
＆LT;身体GT;\r
\r
＆LT; DIV NG控制器=MainCtrl＆GT;\r
＆LT; DIV ID =GRID1UI格=gridOptions级=网格的UI网编辑UI并网cellnav＆GT;＆LT; / DIV＆GT;\r
＆LT; BR /＆GT;\r
＆LT; BR /＆GT;\r
＆LT;按钮类=BTN BTN-默认的NG点击=ADDUSER（）＆gt;添加一行＆LT; /按钮＆GT;\r
＆LT; / DIV＆GT;\r
\r
\r
＆所述; SCRIPT SRC =app.js＆GT;＆下; /脚本＆GT;\r
＆LT; /身体GT;\r
＆LT; / HTML＆GT; \r
您可以使用您的列的columnDef的财产editableCellTemplate创建用于必要的验证单元格编辑自己的HTML模板。
自定义模板细胞的细胞验证的例子：
{场：公司，显示名：公司，enableColumnMenu：假的，editableCellTemplate：
＆LT; DIV＆GT;＆LT;表格名称= \\inputForm \\＆GT;＆LT;输入类型= \\INPUT_TYPE \\纳克级= \\'小马'+ col.uid \\UI并网编辑NG-模型= \\MODEL_COL_FIELD \\= MINLENGTH 3 MAXLENGTH = 10＆需要GT;＆LT; /形式为GT;＆LT; / DIV＆gt;中}
更新pluncker与显示错误消息： pluncker
做验证所有列，你必须使用相同的editableCellTemplate为每列。
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>
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.
这篇关于如何添加单个细胞中的验证UI网格Angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
