<html ng-app="registrationApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="RegistrationController">
<h1>Student Registration Form</h1>
<form name="registrationForm" novalidate>
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" ng-model="student.firstName" required ng-pattern="/^[a-zA-Z]+$/">
<div ng-show="registrationForm.firstName.$dirty && registrationForm.firstName.$error.required">
First name is required.
</div>
<div ng-show="registrationForm.firstName.$dirty && registrationForm.firstName.$error.pattern">
First name should only contain alphabets.
</div>
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName" ng-model="student.lastName" required ng-pattern="/^[a-zA-Z]+$/">
<div ng-show="registrationForm.lastName.$dirty && registrationForm.lastName.$error.required">
Last name is required.
</div>
<div ng-show="registrationForm.lastName.$dirty && registrationForm.lastName.$error.pattern">
Last name should only contain alphabets.
</div>
<label for="age">Age:</label>
<input type="number" id="age" name="age" ng-model="student.age" required min="18" max="50">
<div ng-show="registrationForm.age.$dirty && registrationForm.age.$error.required">
Age is required.
</div>
<div ng-show="registrationForm.age.$dirty && (registrationForm.age.$error.min || registrationForm.age.$error.max)">
Age should be between 18 and 50.
</div>
<button type="button" ng-click="greetUser()">Submit</button>
<div ng-show="greetingMessage">
{{ greetingMessage }}
</div>
</form>
<script>
var app = angular.module('registrationApp', []);
app.controller('RegistrationController', function ($scope) {
$scope.student = {};
$scope.greetUser = function () {
var currentHour = new Date().getHours();
if (currentHour >= 5 && currentHour < 12) {
$scope.greetingMessage = 'Good Morning!';
} else if (currentHour >= 12 && currentHour < 18) {
$scope.greetingMessage = 'Good Afternoon!';
} else {
$scope.greetingMessage = 'Good Evening!';
}
};
});
</script>
</body>
</html>
No comments:
Post a Comment