Validate TextBox in Table row based on CheckBox on Button Click in AngularJS

mahesh213
 
on Feb 20, 2020 02:42 AM
Sample_142723.zip
1603 Views

Hi,

I have 2 fields Active and Name

if i have checked then Name field is mandatory else it's optional

after clicking of save button if everything is valid dispaly suceess message at paticular row

could you please help me

@{ 
    Layout = null;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope, $http) {
            $scope.employees = [{ Active: 0 }, { Active: 1}];
            $scope.save = function () {
            }
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>Active</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="employee in employees">
                <td><input type="checkbox" ng-model="employee.Active"  /></td>
                <td><input type="text" ng-model="employee.Name" /></td>
            </tr>
        </tbody>
    </table>
    <button ng-click="Save()">Save</button>
</body>
</html>
Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Feb 20, 2020 06:32 AM

Hi mahesh213,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("MyApp", []);
        app.controller("MyController", function ($scope) {
            $scope.employees = [{ Active: 0 }, { Active: 1}];
            for (var i = 0; i < $scope.employees.length; i++) {
                $scope.employees[i].Active = $scope.employees[i].Active == 1 ? true : false;
            }
            $scope.Save = function () {
                for (var i = 0; i < $scope.employees.length; i++) {
                    if ($scope.employees[i].Active) {
                        if ($scope.employees[i].Name == "" || $scope.employees[i].Name == undefined) {
                            $scope.employees[i].IsValid = 0;
                        } else {
                            $scope.employees[i].IsValid = 1;
                        }
                    } else {
                        $scope.employees[i].IsValid = 1;
                    }
                }
            }
        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>Active</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="employee in employees">
                <td><input type="checkbox" ng-model="employee.Active" /></td>
                <td><input type="text" ng-model="employee.Name" /></td>
                <td>
                    <span style="color: Green;" ng-show="employee.IsValid==1">Success!</span> 
                    <span style="color: Red;" ng-show="employee.IsValid==0">Name Required!</span>
                </td>
            </tr>
        </tbody>
    </table>
    <button ng-click="Save()">Save</button>
</body>
</html>

Demo