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
# IntelliJ project files
.idea
*.iml
#Node
node_modules
\ No newline at end of file
{
"name": "angular-matrix-validation",
"version": "0.0.0",
"description": "Matrix valition for angular form",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": {
"name": "Techniv",
"email": "contact@techniv.fr"
},
"license": "MIT",
"devDependencies": {
"angular": "*"
}
}
/**
* Created by Techniv on 11/01/2017.
*/
angular.module('matrixValidation', []).directive('matrixValidator', [
'$timeout',
($timeout) => {
return {
restrict: 'A',
require: 'form',
link: (scope, element, attributes, ctrl) => {
let validator = scope.$eval(attributes.all);
let inputMatrix = [];
$timeout(()=>{
let inputs = angular.element(element[0].querySelectorAll('[data-row]'));
for(let i = 0; i < inputs.length; i++){
let input = inputs[i];
let name = input.name;
let $input = angular.element(input);
let inputCtrl = ctrl[name];
let inputScope = $input.scope();
let x = parseInt(inputScope.$eval(input.dataset.row));
let y = parseInt(inputScope.$eval(input.dataset.col));
if(isNaN(x) || isNaN(y) | ! inputCtrl) continue;
if( ! inputMatrix[x] ) inputMatrix[x] = [];
inputMatrix[x][y] = inputCtrl;
inputCtrl.$validators.matrixValidator = validationHandler.bind(inputCtrl);
}
});
function validationHandler(){
let returnValidation = false;
var input = this.$$element[0];
var scope = this.$$scope;
let xInput = parseInt(scope.$eval(input.dataset.row));
let yInput = parseInt(scope.$eval(input.dataset.col));
let matrix = inputMatrix.map((row) => {
return row.map((value) => value.$$rawModelValue);
});
let validationMatrix = matrix.map( row => row.map(() => null));
validationMatrix = validator(matrix, validationMatrix);
for(let x = 0; x < inputMatrix.length; x++){
let row = inputMatrix[x];
for(let y = 0; y < row.length; y++){
if(x == xInput && y == yInput){
returnValidation = validationMatrix[x][y];
continue;
}
let inputCtrl = row[y];
inputCtrl.$setValidity('matrixValidator',validationMatrix[x][y]);
}
}
debugger;
return returnValidation;
}
}
}
}
]);
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error{
border-color: darkred;
}
</style>
</head>
<body ng-app="test" ng-controller="ctrlTest" ng-init="validator = validator">
<ng-form name="mForm" matrix-validator data-all="validator">
<table>
<tr ng-repeat="row in matrix" ng-init="rowId = $index">
<td ng-repeat="item in row track by $index">
<input ng-model="row[$index]" type="number"
data-row="rowId" data-col="$index"
name="item{{rowId}}_{{$index}}"
ng-class="{error: mForm['item'+rowId+'_'+$index].$invalid}"
>
</td>
</tr>
</table>
</ng-form>
<script src="../node_modules/angular/angular.js"></script>
<script src="../src/matrix-validation.js"></script>
<script>
angular.module('test', ['matrixValidation']).controller('ctrlTest', [
'$scope',
($scope) => {
$scope.matrix = [
[0,0,0],
[0,0,0],
[0,0,0]
];
$scope.test=2;
$scope.validator = (matrix, validationMatrix) => {
for(let x = 0; x < matrix.length; x++){
let row = matrix[x];
for(let y = 0; y < row.length; y++){
let value = row[y];
if(validationMatrix[x][y] != null) continue;
for(
let z = (x < matrix.length - 1 ) ? x+1 : 0;
z < ((x < matrix.length -1 ) ? matrix.length : matrix.length - 1);
z++
){
if(value == matrix[z][y]){
validationMatrix[x][y] = false;
validationMatrix[z][y] = false;
break;
}
}
if(validationMatrix[x][y] === null) validationMatrix[x][y] = true;
}
}
return validationMatrix;
};
}
]);
</script>
</body>
</html>
\ No newline at end of file