Scribd
Upload
6 views5 pages

58 09 WT

The document outlines a problem statement for designing a registration and login application using Angular JS. It includes a complete HTML code example for a registration form with fields for name, address, contact number, email, and terms agreement, along with validation messages. The application utilizes Angular JS to handle form submission and display success or error messages based on the validity of the input fields.

Uploaded by

hustleriitian
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views5 pages

58 09 WT

The document outlines a problem statement for designing a registration and login application using Angular JS. It includes a complete HTML code example for a registration form with fields for name, address, contact number, email, and terms agreement, along with validation messages. The application utilizes Angular JS to handle form submission and display success or error messages based on the validity of the input fields.

Uploaded by

hustleriitian
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

-------------------------------------------------------------------------------- -------------------------------------------

----

Problem Statement :

Design an application using Angular JS. e.g., Design registration (first name, last name, username,
password) and login page using Angular JS.

----------------------------------------------------------------------------------------------------------------------------

---------- Code :

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title> Form </title>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<style> body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

display: flex; justify-

content: center; align-

items: center; height:

90vh; margin: 0;

.error {
color: red;

font-size: 12px;

margin-top: 5px;

</style>

</head>

<body ng-app="formApp" ng-controller="formCtrl">

<h3>Registration Form </h3>

<form name="personForm" ng-submit="sendForm()" novalidate>

<!-- Name Field -->

<label for="name">Name</label>

<input id="name" name="name" type="text" ng-model="person.name" required />

<span class="error" ng-show="personForm.name.$touched &&


personForm.name.$error.required">Required!</span>

<br /><br />

<!-- Address Field -->

<label for="address">Address</label>

<input id="address" name="address" type="text" ng-model="person.address" required />

<span class="error" ng-show="personForm.address.$touched &&


personForm.address.$error.required">Required!</span>

<br /><br />

<!-- Contact No Field -->

<label for="mobile">Contact No</label>

<input id="mobile" name="mobile" type="number" ng-model="person.mobile" required


ngpattern="/^\d{10}$/" />
<span class="error" ng-show="personForm.mobile.$touched &&
personForm.mobile.$error.required">Required!</span>

<span class="error" ng-show="personForm.mobile.$touched &&


personForm.mobile.$error.pattern">Must be 10 digits!</span>

<br /><br />

<!-- Email Field -->

<label for="email">Email</label>

<input id="email" name="email" type="email" ng-model="person.email" required />

<span class="error" ng-show="personForm.email.$touched &&


personForm.email.$error.required">Required!</span>

<span class="error" ng-show="personForm.email.$touched &&


personForm.email.$error.email">Invalid Email!</span>

<br /><br />

<!-- Terms and Conditions -->

<input type="checkbox" ng-model="person.terms" id="terms" />

<label for="terms">I agree to the terms.</label>

<span class="error" ng-show="personForm.$submitted && !person.terms">You must agree to


the terms!</span>

<br /><br />

<!-- Submit Button -->

<button type="submit">Submit Form</button>

<br /><br />

<!-- Message -->

<span>{{msg}}</span>

</form>
</body> <script> var app =

angular.module('formApp', []);

app.controller('formCtrl', function ($scope) {

$scope.sendForm = function () {

if ($scope.personForm.$valid) {

$scope.msg = 'Form Submitted Successfully...!';

} else {

$scope.msg = 'Please enter the valide credentials...!';

};

});

</script>

</html>

Output :

You might also like