Angular JS forms

Form is a collection of HTML input controls like button,input text etc.


<div ng-app="myApp" ng-controller="formController">
  <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('myApp', []);
app.controller('formController', function($scope) {
    $scope.master = {firstName: "ABC", lastName: "DEF"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);


  • Define ng-app and name it as myApp
  • Add the ng-controller and name it as formcontroller
  • ng-model directive binds two input elements to user object in model
  • Add two input elements named First name and Last name
  • Add a button named Reset
  • noValidate disables any browser validation
  • the reset() sets the user object equal to master object
  • the ng-click directives invokes the reset() method only when the button is clicked

Angular Validation:

Angular JS forms and Inputs can validate input data

ng-model binds the input element to the model. The model object has 2 properties.USER and EMAIL

$dirty: The user has interacted with field

$valid: The field content is valid

$invalid:The field content is not valid

$pristine:The user hasn’t interacted with field

© 2015, All rights reserved.