Skip to content

Vincent Peybernes / angular-matrix-validation

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 7f192298 7f192298ba65d00836c32dac9f5c15c6bf204df2 by Vincent Peybernes
Options

Init

0 parents
Inline Side-by-side
Showing 4 changed files with 171 additions and 0 deletions
1 # IntelliJ project files
2 .idea
3 *.iml
4
5 #Node
6 node_modules
...\ No newline at end of file ...\ No newline at end of file
1 {
2 "name": "angular-matrix-validation",
3 "version": "0.0.0",
4 "description": "Matrix valition for angular form",
5 "main": "index.js",
6 "scripts": {
7 "test": "echo \"Error: no test specified\" && exit 1"
8 },
9 "author": {
10 "name": "Techniv",
11 "email": "contact@techniv.fr"
12 },
13 "license": "MIT",
14
15 "devDependencies": {
16 "angular": "*"
17 }
18 }
1 /**
2 * Created by Techniv on 11/01/2017.
3 */
4
5 angular.module('matrixValidation', []).directive('matrixValidator', [
6 '$timeout',
7 ($timeout) => {
8 return {
9 restrict: 'A',
10 require: 'form',
11 link: (scope, element, attributes, ctrl) => {
12 let validator = scope.$eval(attributes.all);
13
14 let inputMatrix = [];
15 $timeout(()=>{
16 let inputs = angular.element(element[0].querySelectorAll('[data-row]'));
17 for(let i = 0; i < inputs.length; i++){
18 let input = inputs[i];
19 let name = input.name;
20
21 let $input = angular.element(input);
22 let inputCtrl = ctrl[name];
23 let inputScope = $input.scope();
24
25 let x = parseInt(inputScope.$eval(input.dataset.row));
26 let y = parseInt(inputScope.$eval(input.dataset.col));
27
28
29 if(isNaN(x) || isNaN(y) | ! inputCtrl) continue;
30
31 if( ! inputMatrix[x] ) inputMatrix[x] = [];
32 inputMatrix[x][y] = inputCtrl;
33
34 inputCtrl.$validators.matrixValidator = validationHandler.bind(inputCtrl);
35 }
36 });
37
38
39 function validationHandler(){
40 let returnValidation = false;
41 var input = this.$$element[0];
42 var scope = this.$$scope;
43
44 let xInput = parseInt(scope.$eval(input.dataset.row));
45 let yInput = parseInt(scope.$eval(input.dataset.col));
46
47 let matrix = inputMatrix.map((row) => {
48 return row.map((value) => value.$$rawModelValue);
49 });
50
51 let validationMatrix = matrix.map( row => row.map(() => null));
52
53 validationMatrix = validator(matrix, validationMatrix);
54
55 for(let x = 0; x < inputMatrix.length; x++){
56 let row = inputMatrix[x];
57 for(let y = 0; y < row.length; y++){
58 if(x == xInput && y == yInput){
59 returnValidation = validationMatrix[x][y];
60 continue;
61 }
62
63 let inputCtrl = row[y];
64
65 inputCtrl.$setValidity('matrixValidator',validationMatrix[x][y]);
66 }
67 }
68
69 debugger;
70
71 return returnValidation;
72 }
73 }
74 }
75 }
76 ]);
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .error{
8 border-color: darkred;
9 }
10 </style>
11 </head>
12 <body ng-app="test" ng-controller="ctrlTest" ng-init="validator = validator">
13
14 <ng-form name="mForm" matrix-validator data-all="validator">
15 <table>
16 <tr ng-repeat="row in matrix" ng-init="rowId = $index">
17 <td ng-repeat="item in row track by $index">
18 <input ng-model="row[$index]" type="number"
19 data-row="rowId" data-col="$index"
20 name="item{{rowId}}_{{$index}}"
21 ng-class="{error: mForm['item'+rowId+'_'+$index].$invalid}"
22 >
23 </td>
24 </tr>
25 </table>
26 </ng-form>
27
28 <script src="../node_modules/angular/angular.js"></script>
29 <script src="../src/matrix-validation.js"></script>
30 <script>
31 angular.module('test', ['matrixValidation']).controller('ctrlTest', [
32 '$scope',
33 ($scope) => {
34 $scope.matrix = [
35 [0,0,0],
36 [0,0,0],
37 [0,0,0]
38 ];
39
40 $scope.test=2;
41
42 $scope.validator = (matrix, validationMatrix) => {
43 for(let x = 0; x < matrix.length; x++){
44 let row = matrix[x];
45 for(let y = 0; y < row.length; y++){
46 let value = row[y];
47
48 if(validationMatrix[x][y] != null) continue;
49
50 for(
51 let z = (x < matrix.length - 1 ) ? x+1 : 0;
52 z < ((x < matrix.length -1 ) ? matrix.length : matrix.length - 1);
53 z++
54 ){
55 if(value == matrix[z][y]){
56 validationMatrix[x][y] = false;
57 validationMatrix[z][y] = false;
58 break;
59 }
60 }
61
62 if(validationMatrix[x][y] === null) validationMatrix[x][y] = true;
63 }
64 }
65 return validationMatrix;
66 };
67 }
68 ]);
69 </script>
70 </body>
71 </html>
...\ No newline at end of file ...\ No newline at end of file