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>
For any types of queries, you can contact us on info[at]namasteui.com.
Educational technology has been very helpful in the era of ever-advancing technology. It opens millions…
Have you ever thought of a world where asking the Internet for information feels like…
We've gotten so used to seeing men streetwear joggers, ripped jeans, and sleeveless shirts. Hair…
When it comes to festivals, the options for wedding jewellery are endless. You can go…
Whether it concerns your home or an office building, the state of a property’s windows…
You know that running an environmentally sustainable business is the right thing to do. But…
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