How to create angularjs form

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.

angularjs-form

Create form.html page and copy paste below angularjs file before head tag closed.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

Create angularjs form

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.

<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>

First Name:<br />

Last Name:<br />

<button ng-click="reset()">RESET</button>

</form>

<p>master = {{master}}</p>

</div>