AngularJS Registration Form example
In this post, we are going to create a sample registration form in which we are using some basic angular directive to perform a registration task.Form validations are done using regex pattern.
Once the user enters the data application ask to confirm the entries and then submit the data to be added in array.
Angular directives used in this app are below:
Below is the code for same
RegApp.html
<html ng-app="notesApp">
<head>
<title></title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl as ctrl" class="container">
<form novalidate name="myform" ng-hide="showme" class="form-horizontal">
<h2 class="well">User Registration Form</h1>
<ng-form name="email">
<div class = "input-group">
<label for="email" class="label label-default col-sm-3" >Email:</label>
<input type="text" ng-model="ctrl.user.email" placeholder="Email" ng-pattern="emailregex" class="form-control input-sm-6"> <span class="label label-danger" ng-show="myform.email.$invalid">
Email Id is not valid
</span> </input></br>
</div>
</ng-form>
<ng-form name="contact">
<div class = "input-group">
<label for="contact" class="label label-default col-sm-3">Contact:</label>
<input type="text" ng-model="ctrl.user.contact" placeholder="Contact No" ng-required='!ctrl.user.email' ng-pattern="contactregex" class="form-control input-sm-6">
</div>
</ng-form>
</br>
<input type="submit" value="submit" ng-disabled="myform.$invalid" ng-click='savedata()' class="btn btn-primary">
</form>
<form name="cform" ng-show="showconfirm" class="form-horizontal">
<h5 class="well">You have entered below data.Do you want submit?</h2>
<h1>
<div class = "input-group">
<label for="email" class="label label-default col-sm-5" >Email:</label>
<input type="text" ng-model="cemail" class="form-control input-sm-4"> </br>
</div>
<div class = "input-group">
<label for="email" class="label label-default col-sm-5" >Contact:</label>
<input type="text" ng-model="ccontact" class="form-control input-sm-4">
</div>
<input type="submit" value="Confirm" class="btn btn-primary" ng-disabled="dis" ng-click='confirmdata()'>
<input type="submit" value="Add More" class="btn btn-primary" ng-click='addmore()' ng-disabled="ais">
</form>
<script type="text/javascript">
angular.module("notesApp",[])
.controller("MainCtrl", function($scope){
$scope.emailregex=/^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/;
$scope.contactregex=/^(\+\d{1,3}[- ]?)?\d{10}$/;
$scope.reglist=[{email:'',contact:''}];
$scope.savedata=function(){
$scope.showme=true;
$scope.showconfirm=true;
$scope.cemail=$scope.ctrl.user.email;
$scope.ccontact=$scope.ctrl.user.contact;
console.log($scope.reglist.length);
$scope.ais = true;
};
$scope.confirmdata=function(){
$scope.showdata=true;
$scope.reglist.push({email:$scope.cemail,contact:$scope.ccontact});
$scope.dis = true;
$scope.ais = false;
};
$scope.addmore=function(){
$scope.showme=false;
$scope.showconfirm=false;
$scope.dis = false;
$scope.ctrl.user.email='';
$scope.ctrl.user.contact='';
};
});
</script>
<form name="rform" ng-show="showdata" class="form-horizontal">
<table class="table table-striped">
<thead>
<tr>
<th>
Email
</th>
<th>
Contact
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="det in reglist">
<td>{{det.email}}</td>
<td>{{det.contact}}</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Give you suggestion in comments.If you like the post Share with your friends on social network.
Once the user enters the data application ask to confirm the entries and then submit the data to be added in array.
Angular directives used in this app are below:
ng-form
ng-pattern
ng-hideng-showng-controllerng-requiredng-disabledng-clickng-disabled
Below is the code for same
RegApp.html
<html ng-app="notesApp">
<head>
<title></title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl as ctrl" class="container">
<form novalidate name="myform" ng-hide="showme" class="form-horizontal">
<h2 class="well">User Registration Form</h1>
<ng-form name="email">
<div class = "input-group">
<label for="email" class="label label-default col-sm-3" >Email:</label>
<input type="text" ng-model="ctrl.user.email" placeholder="Email" ng-pattern="emailregex" class="form-control input-sm-6"> <span class="label label-danger" ng-show="myform.email.$invalid">
Email Id is not valid
</span> </input></br>
</div>
</ng-form>
<ng-form name="contact">
<div class = "input-group">
<label for="contact" class="label label-default col-sm-3">Contact:</label>
<input type="text" ng-model="ctrl.user.contact" placeholder="Contact No" ng-required='!ctrl.user.email' ng-pattern="contactregex" class="form-control input-sm-6">
</div>
</ng-form>
</br>
<input type="submit" value="submit" ng-disabled="myform.$invalid" ng-click='savedata()' class="btn btn-primary">
</form>
<form name="cform" ng-show="showconfirm" class="form-horizontal">
<h5 class="well">You have entered below data.Do you want submit?</h2>
<h1>
<div class = "input-group">
<label for="email" class="label label-default col-sm-5" >Email:</label>
<input type="text" ng-model="cemail" class="form-control input-sm-4"> </br>
</div>
<div class = "input-group">
<label for="email" class="label label-default col-sm-5" >Contact:</label>
<input type="text" ng-model="ccontact" class="form-control input-sm-4">
</div>
<input type="submit" value="Confirm" class="btn btn-primary" ng-disabled="dis" ng-click='confirmdata()'>
<input type="submit" value="Add More" class="btn btn-primary" ng-click='addmore()' ng-disabled="ais">
</form>
<script type="text/javascript">
angular.module("notesApp",[])
.controller("MainCtrl", function($scope){
$scope.emailregex=/^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/;
$scope.contactregex=/^(\+\d{1,3}[- ]?)?\d{10}$/;
$scope.reglist=[{email:'',contact:''}];
$scope.savedata=function(){
$scope.showme=true;
$scope.showconfirm=true;
$scope.cemail=$scope.ctrl.user.email;
$scope.ccontact=$scope.ctrl.user.contact;
console.log($scope.reglist.length);
$scope.ais = true;
};
$scope.confirmdata=function(){
$scope.showdata=true;
$scope.reglist.push({email:$scope.cemail,contact:$scope.ccontact});
$scope.dis = true;
$scope.ais = false;
};
$scope.addmore=function(){
$scope.showme=false;
$scope.showconfirm=false;
$scope.dis = false;
$scope.ctrl.user.email='';
$scope.ctrl.user.contact='';
};
});
</script>
<form name="rform" ng-show="showdata" class="form-horizontal">
<table class="table table-striped">
<thead>
<tr>
<th>
</th>
<th>
Contact
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="det in reglist">
<td>{{det.email}}</td>
<td>{{det.contact}}</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Give you suggestion in comments.If you like the post Share with your friends on social network.
AngularJS Registration Form example
Reviewed by JavaInstance
on
11:10:00 AM
Rating:
Reviewed by JavaInstance
on
11:10:00 AM
Rating:
No comments: