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> If you have been researching digital marketing programs in India, Kraftshala and IIDE both keep…
Email marketing remains one of the highest-performing digital marketing channels because it gives businesses direct…
Pain in muscles and joints can be a problem in everyday life, whether it involves…
Most modern businesses spend a lot of time thinking about digital touchpoints. Websites, email campaigns,…
While TikTok and Instagram battle for users’ attention with short vertical videos, Elon Musk’s social…
When you are looking to apply for a mortgage the one thing that most people…
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