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> People usually stumble onto the 461 visa when they realise there’s no simple way to…
In today’s digital era, people look for convenience, transparency, and genuine rewards from their financial…
If you are planning to start a lighting business and looking for a supplier of…
If you are a copywriter or a content marketer, you will second my statement that…
Motorcycle accidents often lead to severe injuries because riders have minimal protection compared to drivers…
No business owner starts his or her business with the hope of making losses. Everyone…
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