ng-repeat controller validation

in the controller verify duplicate entries

by Albert

HTML

<body ng-app="ap" ng-controller="con">
    <table>
        <tr>
            <td>name</td>
        </tr>
        <tr ng-repeat="person in persons">
            <td>
                <ng-form name="personForm">
                 <div ng-class="{ 'has-error' : 
                    personForm.personName.$invalid }">
                    <input type='number'
                    name="personName"
                    ng-class="empty"
                    ng-model="person.name"
                    ng-change="verifyDuplicate(this, person)"/>
                   </div>
                 </ng-form>
                <div class='error' 
                    ng-show=
                    'personForm.personName.$error.duplicate'>
                    Duplicate.
                </div>
            </td>
        </tr>
    </table> 
</body>

CSS

.empty{
    border-style: solid;
    border-color: rgba(255, 135, 66, 0.75);
    background-color: rgba(252, 102, 2, 0.54);
}

.normal{
    color: black;
}

JavaScript

var app = angular.module("ap",[]);

app.controller("con",function($scope){
    
    $scope.persons = [
        {name: 1},
        {name: 2},
        {name: 3}
    ];
    
    $scope.empty = "normal";
    
    $scope.verifyDuplicate = function(domScope, object){
        for(var i = 0; i < $scope.persons.length; i++) {
            if($scope.persons[i].name === object.name 
               && $scope.persons[i] !== object) {
domScope.personForm.personName.$setValidity('duplicate',false);
            }
            else {
domScope.personForm.personName.$setValidity('duplicate',true);
            }
        }
    };
});