Solution:
<html>
<head><script src=" angular.min.js"></script></head>
<center>
<body ng-app="mainApp" ng-controller="voterController">
<h2 style="color:blue">Voter Details Form</h2>
<div>
<form name="voterform" novalidate="true">
<table border="1">
<tr>
<td>Enter the Name of voter</td>
<td><input type="text" name="name1" ng-model="name1" ng-pattern="/^[A-Z]*$/" ng- required="true"></td>
<td><span style="color:red" ng-show="voterform.name1.$dirty && voterform.name1.$invalid"></span>
<span ng-show="voterform.name1.$error.required">Voter Name is required.</span>
<span ng-show="voterform.name1.$error.pattern">only Uppercase characters are allowed.</span>
</td>
</tr>
<tr>
<td>Enter the voters age </td>
<td><input type="number" name="age" ng-model="age" ng-pattern="/^(?:1[8-9]|[2-5][0-9]|100)$/" ng-required="true"></td>
<td>
<span ng-show="voterform.age.$error.required">voter age is required</span>
<span ng-show=" voterform.age.$error.pattern"> Voter age should be more than 18</span>
</td>
</tr>
<tr>
<td>Enter the Nationality</td>
<td><input type="text" name="nat" ng-model="nat" ng-required="true"> </td>
<td> <span ng-show="voterform.nat.$error.required">Nationality is required</span>
<span ng-show="voterform.pincode.$error.pattern">Nationality should be Indian</span>
</td>
</tr>
<tr>
<td> <input type="button" value="Voter Info" ng-click="isShow('show')"></td>
</tr>
</table>
</form>
</div>
<div ng-show="showval">
<br><br>
voter Information<br><br>
<table border="1">
<thead>
<td>name</td>
<td>Age</td>
<td>Nationality</td>
</thead>
<tr>
<td>{{name1}}</td>
<td>{{age}}</td>
<td>{{nat}}</td>
</tr>
</table>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('voterController', function ($scope) {
$scope.showval = false;
$scope.isShow = function (param) {
if (param == "show") {
$scope.showval = true;
}
}
});
</script>
</body>
</center>
</html>
0 Comments