By: Prem Tiwari | Last Updated: | In: Angular JS
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 2 3 | <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 15 16 | <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 21 | < !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> |
Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
angular form, angular forms tutorial, angularjs form example, angularjs form submit, angularjs form tutorial, angularjs input form, angularjs tutorial, angularjs tutorial for beginners
