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> Securing your family's life and their well-being is probably your number one priority. With the…
Let’s cut straight to it: the phrase NSFW AI image generator has been flying around…
Content marketing has a hidden tax. It's not the writing itself, it's everything that happens…
Most marketing teams aren't failing because they lack data. They're failing because they can't act…
Email marketing continues to be one of the most effective ways for businesses to communicate,…
Xerox first introduced it around the mid-1970s. The need came up because the management activities…
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