Display (Show) validation message based on condition in HTML Table Row in AngularJS

mahesh213
 
on Feb 10, 2020 01:28 AM
Sample_535305.zip
1207 Views

Hi,

I have one textbox Duration

if duration is greater than 9 need to display validation message at relevant line.

could you please help me

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $http, $window) {
            $scope.Details = [{ Name: 'mahesh' }];          
            $scope.IsValid = true;
            $scope.IsExist = false;
            $scope.GetMaxLength = function (timesheet, index) {
                if (timesheet.Duration != null) {
                    if (timesheet.Duration > 0 && timesheet.Duration <= 9) {

                    }
                    else {
                        $scope.IsValid = false;
                        $scope.IsExist = true;
                    }
                }
                else {
                    $scope.IsValid = true;
                    $scope.IsExist = false;
                }
            }
        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <table id="tblOrders" class="table table-responsive">
        <tr>
            <th>Name</th>
            <th>Duration</th>
        </tr>
        <tbody ng-repeat="detail in Details">
            <tr>
                <td><input type="text" ng-model="detail.Name" /></td>
               <td>
                   <input type="text" ng-model="detail.Duration" ng-change="GetMaxLength(detail,$index)" />
               </td>
            </tr>
        </tbody>
    </table>    
</body>
</html>
Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Feb 10, 2020 03:46 AM
on Feb 10, 2020 04:07 AM

Hi mahesh213,

Refer below code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $http, $window) {
            $scope.Details = [{ Name: 'mahesh' }, { Name: 'mukesh'}];
            $scope.GetMaxLength = function (timesheet, index) {
                if (timesheet.Duration != null) {
                    if (timesheet.Duration >= 9) {
                        $scope.Details[index].IsValid = true;
                    }
                    else {
                        $scope.Details[index].IsValid = false;
                    }
                }
                else {
                    $scope.Details[index].IsValid = false;
                }
            }
        }); 
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <table id="tblOrders" class="table table-responsive">
        <tr>
            <th>Name</th>
            <th>Duration</th>
        </tr>
        <tbody ng-repeat="detail in Details">
            <tr>
                <td><input type="text" ng-model="detail.Name" /></td>
                <td>
                    <input type="text" ng-model="detail.Duration" ng-change="GetMaxLength(detail,$index)" />
                    <br /><span style="color:Red;" ng-show="detail.IsValid">Enter duration less than 9.</span>
                </td>
            </tr>
        </tbody>
    </table>     
</body>
</html>

Demo