Hi mahesh213,
Check this example. Now please take its reference and correct your code.
You need to check another condition in the if statement that if the table row length greater than or equals to 2 then only the condition executed.
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
}
View
<html>
<head>
<title>Index</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $http, $window) {
$scope.invoice = false;
$scope.hide = false;
$scope.ShowHide = function () {
$scope.invoice = $scope.invoice ? false : true;
}
$scope.Customers = [];
$scope.Add = function () {
//Add the new item to the Array.
if ($scope.Name != undefined || $scope.Name1 != undefined) {
var customer = {};
customer.Name = $scope.Name;
customer.Name1 = $scope.Name1;
$scope.Customers.push(customer);
//Clear the TextBoxes.
$scope.Name = "";
$scope.Name1 = "";
$('#trRow').attr("style", "display: none;");
}
};
$scope.Save = function (isValid) {
var rowCount = $('#tblCustomers tbody tr').length;
if (rowCount < 2) {
$('#trRow').attr("style", "display: block;");
}
else {
$('#trRow').attr("style", "display: none;");
}
if (isValid && rowCount >= 2) {
$scope.mahesh = false;
alert("Form is valid");
$scope.userForm.$setPristine();
}
else {
$scope.mahesh = true;
if ($scope.userForm.$error.required != undefined) {
for (var i = 0; i < $scope.userForm.$error.required.length; i++) {
$scope.userForm.$error.required[i].$pristine = false;
}
}
}
}
});
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<div ng-show="invoice">
<form name="userForm" novalidate>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<table class="table table-condensed">
<tr class="active">
<td>Order Name</td>
<td ng-class="{ 'has-error' : userForm.OrderName.$invalid && !userForm.OrderName.$pristine }">
<input type="text" class="form-control" name="OrderName" ng-model="OrderName" required />
<p style="color: red" ng-show="userForm.OrderName.$error.required && !userForm.OrderName.$pristine"
class="help-block">Order Name is required.</p>
</td>
<td>Order Date</td>
<td><input type="text" class="form-control" name="date" ng-model="OrderDate" /></td>
</tr>
</table>
</div>
</div>
</div>
<table id="tblCustomers" cellpadding="0" cellspacing="0">
<tr>
<th>Name</th>
<th>Name1</th>
<th> </th>
</tr>
<tbody ng-repeat="m in Customers">
<tr>
<td ng-show="hide">{{m.Id}}</td>
<td>{{m.Name}}</td>
<td>{{m.Name1}}</td>
<td><input type="button" ng-click="Remove($index)" value="Remove" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td><input type="text" name="Name" ng-model="Name" /></td>
<td><input type="text" ng-model="Name1" name="Name1" /></td>
<td><input type="button" ng-click="Add()" value="Add" /></td>
</tr>
<tr id="trRow" style="display: none;">
<td colspan="3">
<p style="color: red" class="help-block">Please enter alteast one row...!</p>
</td>
</tr>
</tfoot>
</table>
<div style="padding: 10px 0;">
<input id="submit" type="button" value="Save" name="add" ng-click="Save(userForm.$valid)"
class="btn btn-success" />
</div>
</form>
</div>
<button class="btn btn-success btn-sm " ng-click="ShowHide();" style="margin-left: 15px;">Add Order</button>
</div>
</body>
</html>
Screenshot
