Hi SUJAYS,
Check this example. Now please take its reference and correct your code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', []);
app.controller("MyController", function ($scope, $window) {
$scope.Save = function (isValid, e) {
if (isValid) {
$window.alert("Valid");
} else {
// Show error Message if Form not valid.
if ($scope.MyForm.$error.required != undefined) {
for (var i = 0; i < $scope.MyForm.$error.required.length; i++) {
$scope.MyForm.$error.required[i].$pristine = false;
}
}
e.preventDefault();
}
}
});
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<form id="form1" runat="server" novalidate>
<div name="MyForm" ng-form novalidate>
<table>
<tr>
<td><asp:Label ID="Label5" runat="server" Text="EmpCode"></asp:Label></td>
<td>
<asp:TextBox ID="txtempcode" runat="server" ng-model="Code" required></asp:TextBox>
<span ng-show="MyForm.txtempcode.$error.required && !MyForm.txtempcode.$pristine"
style="color: Red;">Employee code required!</span>
</td>
</tr>
<tr>
<td><asp:Label ID="Label6" runat="server" Text="Name"></asp:Label></td>
<td>
<asp:TextBox ID="txtempname" runat="server" ng-model="Name" required></asp:TextBox>
<span ng-show="MyForm.txtempname.$error.required && !MyForm.txtempname.$pristine"
style="color: Red;">Employee name required!</span>
</td>
</tr>
<tr>
<td><asp:Label ID="Label7" runat="server" Text="Date Of Birth"></asp:Label></td>
<td>
<asp:TextBox ID="txtdob" runat="server" ng-model="DOB" required></asp:TextBox>
<span ng-show="MyForm.txtdob.$error.required && !MyForm.txtdob.$pristine" style="color: Red;">
Dato of Birth required!</span>
</td>
</tr>
<tr>
<td><asp:Label ID="Label8" runat="server" Text="Address"></asp:Label></td>
<td>
<asp:TextBox ID="txtaddress" runat="server" ng-model="Address" required></asp:TextBox>
<span ng-show="MyForm.txtaddress.$error.required && !MyForm.txtaddress.$pristine"
style="color: Red;">Address required!</span>
</td>
</tr>
<tr>
<td><asp:Label ID="Label9" runat="server" Text="Email"></asp:Label></td>
<td>
<asp:TextBox ID="txtemail" runat="server" ng-model="Email" required ng-pattern="/^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/"></asp:TextBox>
<span ng-show="MyForm.txtemail.$error.required && !MyForm.txtemail.$pristine" style="color: Red;">
Email required!</span> <span ng-show="MyForm.txtemail.$error.pattern" style="color: Red;">
Invalid Email Address</span>
</td>
</tr>
<tr>
<td> </td>
<td><asp:Button ID="Button1" runat="server" Text="Save" ng-click="Save(MyForm.$valid,$event)" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
Screenshot
