Question

我是角度新手，我想验证网格单元格的值。

所以这是一个例子。

这是我的.js文件

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit', 'ui.grid.cellNav']);

app.controller('MainCtrl', ['$scope', function ($scope) {
  $scope.gridOptions =
	{
		rowHeight:45,
		enableSorting: true,
		enableFiltering: false,
		multiSelect: false,
		enableCellEditOnFocus: true,
		enableCellEdit:true,
		columnDefs:
		[
			{
				field: 'firstName',
				displayName: 'First Name',
				enableColumnMenu: false
			},
		    {
				field: 'lastName',
				displayName: 'Last Name',
				enableColumnMenu: false
			},
		    {
				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=5 maxlength=10 required><div ng-show=\"!inputForm.$valid\"><span class=\"error\">To short!</span></div></form></div>"
			},
		    {
				field: 'employed',
				displayName: 'Employed',
				enableColumnMenu: false
			}
		]    
	};

  $scope.gridOptions.data = [
    {
        "firstName": "Hosel",
        "lastName": "Carney",
        "company": "Enormo",
        "employed": true
    },
    {
        "firstName": "Rina",
        "lastName": "Wise",
        "company": "Comveyer",
        "employed": false
    },
    {
        "firstName": "Nanju",
        "lastName": "Waters",
        "company": "Fuelton",
        "employed": false
    }
];

$scope.gridOptions.onRegisterApi = function(gridApi)
{
  $scope.gridApi=gridApi;
};

$scope.addUser=function()
	{
		var _model=
		{
		"firstName": null,
        "lastName": null,
        "company": null,
        "employed": null
		};
	  
		$scope.gridOptions.data.unshift(_model);
		setTimeout(function(){
		  $scope.gridApi.cellNav.scrollToFocus($scope.gridOptions.data[0], $scope.gridOptions.columnDefs[0]);
		}, 100)
		
	};
}]);

This is the .css file

.grid {
  width: 500px;
  height: 250px;
}

This is my HTML file

<!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="gridStyle" ui-grid-edit ui-grid-cellnav></div>
  <br/>
  <br/>
  <button class="btn btn-default" ng-click="addUser()">Add row</button>
</div>

如果公司名称不同，我想要在每列中验证公司名称。我应该显示错误。

请参阅Plunker Click here to see the code online on Plunker

如何验证角网格单元格值

0 个答案: