Solution:
<html>
<head> <script src="angular.min.js"></script></head>
<body ng-app="mainApp" ng-controller="empController">
<h2>Employee Registration Form</h2>
<div ng-app="mainApp" ng-controller="empController">
<form name="employeeForm" novalidate>
<table border="1">
<tr>
<td>Enter Date of Birth:</td>
<td><input name="dob" type="text" ng-model="dob" ng-pattern="/^[0-9]/" required>
<span style="color:red" ng-show="employeeForm.dob.$dirty && employeeForm.dob.$invalid"></
span>
<span ng-show="employeeForm.dob.$error.required">Date of Birth is required.</span>
<span ng-show="employeeForm.dob.$error.pattern">Not a valid date of birth !</span>
</td>
</tr>
<tr>
<td>Enter the Joining Date: </td>
<td><input name="jdate" type="text" ng-model="jdate" ng-pattern="/^[0-9]/" required>
<span style="color:red" ng-show="employeeForm.jdate.$dirty && employeeForm.jdate.$invalid">
<span ng-show="employeeForm.jdate.$error.required">Joining Date is required.</span>
<span ng-show="employeeForm.jdate.$error.pattern">Not a valid joining date!</span>
</td>
</tr>
<tr>
<td>
Enter the Salary:
</td>
<td>
<input type="text" ng-model="salary" name="salary" ng-pattern="/^[0-9]/" required />
<span style="color:red" ng-show="employeeForm.salary.$dirty && employeeForm.salary.
$invalid">
<span ng-show="employeeForm.salary.$error.required">salary is required.</span>
<span ng-show="employeeForm.salary.$error.pattern">Not a valid number!</span>
</td>
</tr>
<tr>
<td>
<button ng-click="reset()">Reset</button>
</td>
<td>
<button ng-disabled="employeeForm.dob.$dirty && employeeForm.dob.$invalid || employeeForm.jdate.$dirty && employeeForm.jdate.$invalid||employeeForm.salary.$invalid && employeeForm.salary.$dirty" ng-click="submit()">Submit</button>
</td>
</tr>
</table>
<div>
<form>
<label> Enter First Value</label><input type="number" name="first" ng-model="number1"><br>
<label>Enter Second Value</label><input type="number" name="second" ng-model="number2">
<br>
<br>select operation<br>
Substraction<input type="radio" value="-" name="arith" ng-model="status"><br>
Multiplication<input type="radio" value="*" name="arith" ng-model="status"><br>
Division<input type="radio" value="/" name="arith" ng-model="status"><br>
Add<input type="radio" value="+" name="arith" ng-model="status"><br>
</form>
<hr>
<div ng-switch="status">
<div ng-switch-when="+">
<h2>{{number1 + number2}} </h2>
</div>
<div ng-switch-when="-">
<h2>{{number1 - number2}} </h2>
</div>
<div ng-switch-when="*">
<h2> {{number1*number2}}</h2>
</div>
<div ng-switch-when="/">
<h2> {{number1/number2}}</h2>
</div>
</div>
</div>
</form>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('empController', function ($scope) {
$scope.reset = function () {
$scope.dob = "";
$scope.jdate = "";
$scope.salary = "";
}
$scope.reset();
});
</script>
</body>
</html>
0 Comments