如何在 Ui-Grid Angularjs 中添加单个单元格验证 [英] How to add Individual Cell Validation in Ui-Grid Angularjs

查看：21 发布时间：2021/11/10 4:22:11 angularjs angular-ui-grid

本文介绍了如何在 Ui-Grid Angularjs 中添加单个单元格验证的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

<html ng-app="app"><头><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"><身体><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()">添加行</button>

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

解决方案

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

{field: 'company', displayName: 'Company', enableColumnMenu: false,editableCellTemplate:<div><表单名称=\"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 并显示错误消息: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-Grid Angularjs 中添加单个单元格验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何在 Ui-Grid Angularjs 中添加单个单元格验证 [英] How to add Individual Cell Validation in Ui-Grid Angularjs

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

如何在 Ui-Grid Angularjs 中添加单个单元格验证 [英] How to add Individual Cell Validation in Ui-Grid Angularjs

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭