Hi mahesh213,
@ is a special symbol in Razor syntax.
Use @ instead of @ in ng-pattern or declare a scope variable with double @ symbol and pass it to ng-pattern.
Refer below code.
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style type="text/css">
.error {
color: red;
}
</style>
<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) {
$scope.EmailExpression = /^([\w-\.]+)@@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
});
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<form name="MyForm" ng-submit="MyForm.$valid" novalidate>
<table border="0" cellpadding="0" cellspacing="5">
<tr>
<td>Email:</td>
<td><input type="text" ng-model="EmailAddress" name="Email" required ng-pattern="EmailExpression" /></td>
<td>
<span class="error" ng-show="MyForm.Email.$error.required">*Required</span>
<span class="error" ng-show="MyForm.Email.$error.pattern">*Invalid Email Address</span>
</td>
</tr>
<tr>
<td colspan="3"><hr /></td>
</tr>
<tr>
<td colspan="2" align="right"><button type="submit" ng-disabled="MyForm.$invalid">Submit</button></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Screenshot
