CODEWITHSUNDEEP
javascriptangularjshtml
hassanzi
hassanzi

Reputation: 211

How to prevent insert a duplicate record in Angularjs

I am loading all records from a SQL db table using Angular and web API, what I am trying to do is to prevent the user from inserting a new record in Angular in case some of the data is duplicated with other records returned data, before going to the API. How to raise an alert to notify and tension the user when press save that there are some fields are already exist like "code", "L_Desk", "A_Desc "with the loaded data from the table.

HTML:

<body ng-app="ContractT" ng-controller="crudController">
<br /><br />


<input type="checkbox" ng-model="Hide" />Hide <input type="button" value="Clear" ng-click="resetform()" />
    <input type="submit" value="Save" ng-click="save()"/> <input type="button" value="Delete" ng-click="delete(selectedMember.sys_key)" />
    <fieldset>
        <legend>Contract Type</legend>
        <table>
            <tr>
                <td>Code</td>
                <td><input type="text" size="10" pattern="^[a-zA-Z0-9]+$" title="Alphnumeric" required autofocus ng-model="selectedMember.Code.Staff_Type_Code">
                    <input type="text" size="10" hidden ng-model="selectedMember.sys_key" /> </td>
            </tr>
            <tr>
                <td>Latin Description</td>
                <td><input type="text" required size="35" ng-model="selectedMember.Latin.L_Desc"></td>
            </tr>
            <tr>
                <td>Local Description</td>
                <td><input type="text" required size="35" ng-model="selectedMember.Local.A_Desc"></td>
            </tr>
            <tr>
                <td>No. Of Houres Per Day</td>
                <td><input type="text" pattern="^[0-9]+$" title="Please enter numbers only" size="10" maxlength="2" ng-model="selectedMember.Hours_Day"></td>
            </tr>
            <tr>
                <td>No. Of Days Per Week(s)</td>
                <td><input type="text" pattern="^[0-9]+$" title="Please enter numbers only" size="10" maxlength="2" ng-model="selectedMember.Days_Week"></td>
            </tr>
            <tr>
                <td>End Of Contract By</td>
                <td>
                    <select ng-model="selectedContract">
                        <option>Age</option>
                        <option>Number Of Years in Service</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Number</td>
                <td>
                    <input type="text" pattern="^[0-9]+$" title="Please enter numbers only" size="10" maxlength="2" ng-model="selectedMember.Num_EndWork">
                    <select ng-model="selectedNumber">
                        <option >Months</option>
                        <option>Years</option>
                    </select>
                </td>
            </tr>

        </table>
    </fieldset>

    <br />

    <table border="1" ng-hide="Hide">
        <thead>
            <tr>
                <!--<th>syskey</th>-->
                <th>Code</th>
                <th>Latin Description</th>
                <th>Local Description</th>
                <th>Hours_Day</th>
                <th>Days_Week</th>
                <th>Num_EndWork</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="c in Contracts | filter:selectedMember.Code | filter:selectedMember.Latin | filter:selectedMember.Local ">

                <td style="display:none;"><a href="#" ng-click="showInEdit(c)">{{c.sys_key}}</a></td>
                <td><a href="#" ng-click="showInEdit(c)">{{c.Staff_Type_Code}}</a></td>
                <td><a href="#" ng-click="showInEdit(c)">{{c.L_Desc}}</a></td>
                <td><a href="#" ng-click="showInEdit(c)">{{c.A_Desc}}</a></td>
                <td><a href="#" ng-click="showInEdit(c)">{{c.Hours_Day}}</a></td>
                <td><a href="#" ng-click="showInEdit(c)">{{c.Days_Week}}</a></td>
                <td><a href="#" ng-click="showInEdit(c)">{{c.Num_EndWork}}</a></td>

            </tr>
        </tbody>
    </table>

</form>

Controller :

    contractT.controller('crudController', function ($scope, crudService)
{
    loadrecords();
    function loadrecords()
    {    
        crudService.getContracts().then(function (response) {
            $scope.Contracts = (response.data);
            $scope.selectedMember = {};
            console.log($scope.Contracts);
        });
    }

$scope.save = function () {

    debugger; 

    if ($scope.selectedContract == 'Age' && $scope.selectedNumber == 'Months') {
        var Contract = {
            Staff_Type_Code: $scope.selectedMember.Code.Staff_Type_Code,
            L_Desc: $scope.selectedMember.Latin.L_Desc,
            A_Desc: $scope.selectedMember.Local.A_Desc,
            Num_EndWork: $scope.selectedMember.Num_EndWork,
            Type_EndWork: 1,
            Hours_Day: $scope.selectedMember.Hours_Day,
            Days_Week: $scope.selectedMember.Days_Week,
            sys_key: $scope.selectedMember.sys_key
        }


    }
    else if ($scope.selectedContract == 'Age' && $scope.selectedNumber == 'Years')
    {
        var Contract = {
            Staff_Type_Code: $scope.selectedMember.Code.Staff_Type_Code,
            L_Desc: $scope.selectedMember.Latin.L_Desc,
            A_Desc: $scope.selectedMember.Local.A_Desc,
            Num_EndWork: $scope.selectedMember.Num_EndWork,
            Type_EndWork: 2,
            Hours_Day: $scope.selectedMember.Hours_Day,
            Days_Week: $scope.selectedMember.Days_Week,
            sys_key: $scope.selectedMember.sys_key
        }
    }

    else if ($scope.selectedContract == 'Number Of Years in Service' && $scope.selectedNumber == 'Months') {
        var Contract = {
            Staff_Type_Code: $scope.selectedMember.Code.Staff_Type_Code,
            L_Desc: $scope.selectedMember.Latin.L_Desc,
            A_Desc: $scope.selectedMember.Local.A_Desc,
            Num_EndWork: $scope.selectedMember.Num_EndWork,
            Type_EndWork: 3,
            Hours_Day: $scope.selectedMember.Hours_Day,
            Days_Week: $scope.selectedMember.Days_Week,
            sys_key: $scope.selectedMember.sys_key
        }
    }

    else  {
        var Contract = {
            Staff_Type_Code: $scope.selectedMember.Code.Staff_Type_Code,
            L_Desc: $scope.selectedMember.Latin.L_Desc,
            A_Desc: $scope.selectedMember.Local.A_Desc,
            Num_EndWork: $scope.selectedMember.Num_EndWork,
            Type_EndWork: 4,
            Hours_Day: $scope.selectedMember.Hours_Day,
            Days_Week: $scope.selectedMember.Days_Week,
            sys_key: $scope.selectedMember.sys_key
        }
    }

    if (!$scope.selectedMember.sys_key) {
        var promisePost = crudService.post(Contract);
        promisePost.then(function (pl) {
            loadRecords();
            $scope.selectedmember = {};
        }, function (err) {
            console.log("Err" + err);
        });
    }
    else
    {
        var promisePost = crudService.put(Contract);
        promisePost.then(function (pl) {
            loadRecords();
            $scope.selectedmember = {};
        }, function (err) {
            console.log("Err" + err);
        });
    }
}




$scope.resetform = function () {
    $scope.selectedMember = {};
    //$scope.selectedMember = {};
    //$scope.Local = {};
    //$scope.Nhd = null;
    //$scope.Ndw = null;
    //$scope.Num = null;
    }




$scope.selectedMember = {  Code: "",sys_key:"", Latin:"" , Local:"", Hours_Day :"", Days_Week:"", Num_EndWork:""  } 

$scope.showInEdit = function (member)
{
    $scope.selectedMember = member;
    //$scope.selectedMember.Code = member;
    //$scope.selectedMember.Latin = member;
    //$scope.selectedMember.Local = member;
    //$scope.selectedMember.Hours_Day = member;
    //$scope.selectedMember.Days_Week = member;
    //$scope.selectedMember.Num_EndWork = member;
}

Upvotes: 0

Views: 1119

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222592

You can use filter here inorder to check for duplicates 

var filtered= $filter('filter')($scope.contracts, function(value){
        return value.Staff_Type_Code === Contract.Staff_Type_Code ;
});

if(filtered.length > 0){
   console.log("duplicate exists");
}

Upvotes: 1

Related Questions