Angularjs slip8
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Angular JS Forms</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<script>document.write('<base href="' + document.location + '" />');</script>
</head>
<body ng-controller="studentController">
<h2>Student Registration Details</h2>
<div ng-app="mainApp" ng-controller="studentController">
<form name="studentForm" novalidate>
<table border="1">
<tr>
<td>Enter first name:</td>
<td><input name="firstname" type="text" ng-model="firstName" ng-pattern="/^[a-zA-Z]*$/"
required>
<span style="color:red"
ng-show="studentForm.firstname.$dirty && studentForm.firstname.$invalid">
<span ng-show="studentForm.firstname.$error.required">First Name is required.</span>
</span>
</td>
</tr>
<tr>
<td>Enter last name: </td>
<td><input name="lastname" type="text" ng-model="lastName" ng-pattern="/^[a-zA-Z]*$/"
required>
<span style="color:red" ng-show="studentForm.lastname.$dirty && studentForm.lastname.
$invalid">
<span ng-show="studentForm.lastname.$error.required">Last Name is required.</span>
</span>
</td>
</tr>
<tr>
<td>
Enter Age:
</td>
<td>
<input type="text" ng-model="age" name="age"
ng-pattern="/^(?:1[8-9]|[2-5][0-9]|50)$/" required/>
<span style="color:red" ng-show="studentForm.age.$dirty && studentForm.age.$invalid">
<span ng-show="studentForm.age.$error.required">age is required.</span>
<span style="color:red" ng-show="studentForm.age.$error.pattern">*Invalid Age. Valid
18-50</span>
</td>
</tr>
<tr>
<td>
<button ng-click="reset()">Reset</button>
</td>
<td>
<button ng-disabled="studentForm.firstname.$dirty &&
studentForm.firstname.$invalid || studentForm.lastname.$dirty &&
studentForm.lastname.$invalid||studentForm.age.$invalid && studentForm.age.$dirty" ngclick="submit()">Submit</button>
</td>
</tr>
</table>
</form>
</div>
<div>
<input type="number" ng-model="value"><br>
<span>{{ value | greet}}</span>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function ($scope) {
$scope.reset = function () {
$scope.firstName = "Pratik";
$scope.lastName = "Shinde";
}
$scope.reset();
});
mainApp.filter('greet', function() {
return function(input) {
if (input < 12) {
return 'Good Morning';
} else if (input >= 12 && input <= 17) {
return 'Good Afternoon';
} else if (input > 17 && input <= 24) {
return 'Good Evening';
} else {
return "I'm not sure what time it is!";
}
};
});
</script>
</body>
</html>
0 Comments