Angularjs

Angular JS forms

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

Example:

<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">
    <br><br>
    <button ng-click="reset()">RESET</button>
  </form>
  <p>form = {{{user}}</p>
  <p>master = {{{master}}</p>
</div>
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);
    };
    $scope.reset();
});

Description:

  • 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, www.techkatak.com. All rights reserved.