Monday, 23 November 2020

AJS22

 

<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>