×

Html & Html5

The World's best Software Development Study Portal

AngularJS Forms


  • AngularJS facilitates you to create a form.

  • & provides data-binding and validation of input controls.

  • Input controls provides data-binding by using the ng-model directive.

  • The ng-model directive binds the input controller to the rest of your application.

  • Input controls are the HTML input elements

  • input elements
  • select elements
  • button elements
  • textarea elements




  •    <div ng-app="">
       <form>
       First Name: <input type="text" ng-model="firstname">
       </form>
       <h1>You entered: {{firstname}}</h1>
       </div>
    Output
    First Name:

    You entered: {{firstname}}




    A checkbox has the value true or false. Apply the ng-model directive to a checkbox, and use its value in your application.

    Bind radio buttons to your application with the ng-model directive.

    Radio buttons with the same ng-model can have different values, but only the selected one will be used.

    Bind select boxes to your application with the ng-model directive.

    The property defined in the ng-model attribute will have the value of the selected option in the selectbox.



    Example of Application Code

    <div ng-app="myApp" ng-controller="formCtrl"> <form novalidate> First Name: <input type="text" ng-model="user.firstName"> Last Name: <input type="text" ng-model="user.lastName"> <button ng-click="reset()">RESET </form> <p>form = {{user}} <p>master = {{master}} </div> <script> var app = angular.module('myApp', []); app.controller('formCtrl', function($scope) { $scope.master = {firstName:"John", lastName:"Doe"}; $scope.reset = function() { $scope.user = angular.copy($scope.master); }; $scope.reset(); }); </script>
    Output

    First Name:

    Last Name: