I have specially shared this tutorial for whom who want to start his/her career with angularjs OR just started with angularjs. This tutorial will help your know how to create angularjs form. This is very simple & easy tutorial to help angularjs beginners.
Before start, I assume you have basic knowledge of JavaScript programming language. Lets start creating angularjs form, first include the angularjs file before head tag closed. At the end of this tutorial i will share the complete angularjs form code with example.
Create form.html page and copy paste below angularjs file before head tag closed.
1 | <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> |
Copy & paste below code in form.html file after body tag. In the below code I have created sampleCtrl and ng-app directive defines the Angularjs application and define ng-model directive to bind the input elements in the model. For reset the below form use the reset() function to set default values in the input elements.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div ng-app="myApp" ng-controller="sampleCtrl"> <form novalidate> First Name:<br /> <input type="text" ng-model="user.firstName"/><br /> Last Name:<br /> <input type="text" ng-model="user.lastName"/> <br /><br /> <button ng-click="reset()">RESET</button> </form> <p>form = {{user}}</p> <p>master = {{master}}</p> </div> |
Below is the complete angularjs form script. copy and paste in form.html file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | < !DOCTYPE html> <html lang="en"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="sampleCtrl"> <form novalidate> First Name:<br /> <input type="text" ng-model="user.firstName"/><br /> Last Name:<br /> <input type="text" ng-model="user.lastName"/> <br /><br /> <button ng-click="reset()">RESET</button> </form> <p>form = {{user}}</p> <p>master = {{master}}</p> </div> </body></html> |
If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.
Article Tags: angular form, angular forms tutorial, angularjs form example, angularjs form submit, angularjs form tutorial, angularjs input form, angularjs tutorial, angularjs tutorial for beginners
