Easy learning with example program codes

Angularjs form tutorial


Form act as a container for HTML elements.

Angularjs form:

AngularJS is very rich in form filling and validations. For example we can use ng-click to handle AngularJS click on button and use $dirty and $invalid flags to do the validations. Angularjs contains the form controls like input, select, button etc. These form elements use Angular events for events and validations handling.

Example Explanation:

First include the AngularJS library in the application. The ng-app directive initializes the application. The ng-controller directive defines the application controller named formCtrl. The formCtrl controller sets initial values to master object. It also contain reset() method which copies master object data to user object. The ng-model directive binds the input elements to the user object in the model. The ng-click directive calls reset() method when button is clicked.

Note: The novalidate attribute disables default browser validation if any.


<!DOCTYPE html>
<div ng-app="testApp" ng-controller="formCtrl">
  <form novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <button ng-click="reset()">RESET</button>
  <p>form = {{user }}</p>
  <p>master = {{master}}</p>
var app = angular.module('testApp', []);
app.controller('formCtrl', function($scope) {
    $scope.master = {firstName:"Nidhi", lastName:"Gupta"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);

Try it:

JS Bin on

Industrial Training

We offers Placement Oriented Training on Java, Spring, JSF, Hibernate, PHP, AngularJS, Angular 4, PLSQL, Oracle BI Publisher etc. We also provides Online training, please mail us at


We also provides the Development services for Website Development , Java Development, PHP Development, Android App Development etc. You can contact us on

Copyright © 2019 CodesJava Protection Status SiteMap Reference: Java Wiki