Using AngularJS Forms you can collect number of inputs. Form can also validate input data. For any type of invalid input it can throw error for notify user.
But note to remember that this is just a client side validation. You need to validate from server side also.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<h2>AngularJS Forms & Validation</h2>
<form ng-app="myformApp" ng-controller="myController" name="myform" novalidate>
<div>First Name:<br>
<input type="text" name="firstname" ng-model="firstname" required>
<span style="color:red" ng-show="myform.firstname.$dirty && myform.firstname.$invalid">
<span ng-show="myform.firstname.$error.required">Firstname is required.</span>
</span>
</div>
<div>Last Name:<br>
<input type="text" name="lastname" ng-model="lastname" required>
<span style="color:red" ng-show="myform.lastname.$dirty && myform.lastname.$invalid">
<span ng-show="myform.lastname.$error.required">Lastname is required.</span>
</span>
</div>
<div>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myform.email.$dirty && myform.email.$invalid">
<span ng-show="myform.email.$error.required">Email is required.</span>
<span ng-show="myform.email.$error.email">Invalid email address.</span>
</span>
</div>
<div>
<input type="submit" ng-click="formsubmit()" ng-disabled="myform.user.$dirty && myform.user.$invalid || myform.email.$dirty && myform.email.$invalid">
</div>
</form>
<script>
var app = angular.module('myformApp', []);
app.controller('myController', function($scope) {
$scope.firstname = 'Tim';
$scope.lastname = 'Clance';
$scope.email = 'tim.clance@example.com';
$scope.formsubmit = function() {
alert($scope.firstname + ' ' + $scope.lastname);
};
});
</script>
</body>
</html> In today’s fast-paced and highly competitive marketing environment, even the most creative campaign is only…
We are NYC moving firm. Are you planning a flat move? Maybe a distance or…
Mobile devices, unlike desktops and laptops, can not be handled by dozens or hundreds of…
Augmented Reality- An immersive experience for the learners! Learning and education aren’t the same as…
On special days like birthdays and weddings, we all like to celebrate our loved ones…
A web application is different from a regular mobile or desktop application as it runs…
View Comments
Very Well Explained about the form validation functionality in AngularJs. Looking forward to more content so it will be easy to code for me. Thanks a lot for sharing it