Hi,
I have Orders and Items
I am going to do validations for that
I need to display validation message if i haven't enter any values on required fiedls in the same way we have to enter altelat one row in Items or else i need to display validation message on Items like below
Please enter alteast one row...!
the form should be valid after enetering one row then i need to display form is valid
Could you please check my code and help me
@{
Layout = null;
}
<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 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="~/scripts/dirpagination.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ['angularUtils.directives.dirPagination'])
app.controller('MyController', function ($scope, $http, $window) {
debugger;
$scope.invoice = false;
$scope.hide = false;
$scope.ShowHide = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.invoice = $scope.invoice ? false : true;
}
$scope.Customers = [];
$scope.Add = function () {
//Add the new item to the Array.
var customer = {};
customer.Name = $scope.Name;
customer.Name1 = $scope.Name1;
$scope.Customers.push(customer);
//Clear the TextBoxes.
$scope.Name = "";
$scope.Name1 = "";
};
$scope.Save = function (isValid) {
if (isValid) {
$scope.mahesh = false;
alert("Form is valid");
$scope.userForm.$setPristine();
}
else {
$scope.mahesh = true;
// Show error Message if Form not valid.
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>
</form>
<form name="userForm1" novalidate>
<table 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>
</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>
