Forms - AngularJS
AngularJS provides great way to create Forms which submit their data without postback.
AngularJS Forms use two directives:
- ng-model: The ng-model directives is used for binding input controls to Javascript Objects.
- ng-submit: Bind AngularJS Controller submit function to submit event of HTML Form. It also prevents the form to submit to server directly.
AngularJS Form Example
Result:
- In line 6 defines an testApp application using ng-app directive.
- In line 6 defines an mainCtrl controller using ng-controller directive.
- In line 7 defines a HTML form and ng-submit directive which bind to submit1() function of mainCtrl controller.
- In line 9 bind the input textbox control to firstName property of user object using ng-model directive.
- In line 11 bind the input textbox control to lastName property of user object using ng-model directive.
- In line 15 defines a submit input control which call the submit function of mainCtrl controller.
- In line 21 defines an AngularJS app 'testApp' using angular.module function.
- In line 23 defines an AngularJS controller 'mainCtrl' using app.controller function.
- In line 24 defines a user javascript object.
- In line 25,26 create two properties firstName and lastName into user object.
- In line 27 defines a submit function that print the firstName and lastName of user object into console.