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> The coronavirus outbreak has drastically changed the way we live our lives. Yes, that's absolutely…
Sales and marketing teams help attract, convert, and retain customers to ensure an organization’s long-term…
Are you an owner of a small business who’s trying to come up with ways…
Introduction When patients bring me their lab reports, the confusion is almost always the same.…
Are you excited about remodeling your house after a long time? Perhaps if you're planning…
The practice of yoga teaches us to be present, patient and mindful of our decisions.…
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