How to process form using angular js

share link

by shivanisanju03 dot icon Updated: Mar 9, 2023

technology logo
technology logo

Guide Kit Guide Kit  

The HTML form is a collection of input controls where user can enter the data. Here, you will learn how to display AngularJS form and submit the data.

AngularJS enriches form filling and validation. We can use ng-click event to handle the click button and use $dirty and $invalid flags to do the validation in a seamless way. Use novalidate with a form declaration to disable any browser-specific validation. The form controls make heavy use of AngularJS events


Here is an example of how to process form using angular js

Fig 1: Preview of the output that you will get on running this code from your IDE.

Code

angular
    .module('app', []).controller('MyController', ['$scope',
  function($scope) {
    $scope.lodgingRegistration = {};
    $scope.registered = {};
    $scope.registered.hotel_name = [];
    $scope.lodging = [{
      hotel_name: 'hotelA'
    }, {
      hotel_name: 'hotelB'
    }, {
      hotel_name: 'hotelC'
    }, {
      hotel_name: 'hotelD'
    }];
    $scope.register = function(lodgingRegistration) {

      for (x in $scope.lodging) {
        if ($scope.lodging[x].checked == true) {
          $scope.registered.hotel_name.push($scope.lodging[x].hotel_name);
        }
      }
      if (lodgingRegistration.not_listed != undefined && lodgingRegistration.not_listed != null) {
        $scope.registered.hotel_name.push(lodgingRegistration.not_listed);
      }
    }
  }
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app='app'>
  <div ng-controller='MyController'>
    <div class=" col-md-12">
      <div class="md-form">
        <input type="text" id="Not_Listed" class="form-control" ng-model="lodgingRegistration.not_listed" placeholder="Enter hotel name if not listed below">
        <label for="Not_Listed"></label>
      </div>
      <div class="md-form col-md-6" ng-repeat="x in lodging">
        <input type="checkbox" id="{{x.hotel_name}}" ng-model="x.checked">
        <label for="{{x.hotel_name}}">{{x.hotel_name}}</label>
      </div>
    </div>

    <div class="text-center">
      <button class="btn btn-deep-purple" ng-click="register(lodgingRegistration )">Submit</button>
    </div>
    <h3>Captured Form Data:</h3>
    <pre>{{lodgingRegistration | json}}</pre>

     <table>
        <tbody>
            <tr ng-repeat="x in registered.hotel_name track by $index" >
                <th scope="row">{{$index +1}}</th>
                <td>{{x}}</td>
            </tr>
        </tbody>
    </table>
    </div>
</body>
$scope.lodgingRegistration = {};
$scope.registered = {};
$scope.registered.hotel_name = [];
$scope.lodging = [{
    hotel_name: 'hotelA'
}, {
    hotel_name: 'hotelB'
}, {
    hotel_name: 'hotelC'
}, {
    hotel_name: 'hotelD'
}];
$scope.register = function (lodgingRegistration) {

    for (x in $scope.lodging) {
        if ($scope.lodging[x].checked == true) {
            $scope.registered.hotel_name.push($scope.lodging[x].hotel_name);
        }
    }
    if (lodgingRegistration.not_listed != undefined && lodgingRegistration.not_listed != null) {
        $scope.registered.hotel_name.push(lodgingRegistration.not_listed);
    }
}

<div class=" col-md-12">
        <div class="md-form">
            <input type="text" id="Not_Listed" class="form-control" ng-model="lodgingRegistration.not_listed" placeholder="Enter hotel name if not listed below">
            <label for="Not_Listed"></label>
        </div>
        <div class="md-form col-md-6" ng-repeat="x in lodging">
            <input type="checkbox" id="{{x.hotel_name}}" ng-model="x.checked">
            <label for="{{x.hotel_name}}">{{x.hotel_name}}</label>
        </div>
    </div>

    <div class="text-center">
        <button class="btn btn-deep-purple" ng-click="register(lodgingRegistration )">Submit</button>
    </div>
    <h3>Captured Form Data:</h3>
    <pre>{{lodgingRegistration | json}}</pre>


     <table>
    <tbody>
        <tr ng-repeat="x in registered.hotel_name track by $index" >
            <th scope="row">{{$index +1}}</th>
            <td>{{x}}</td>
        </tr>
    </tbody>
</table>

Instructions

  1. Install Visual Studio Code IDE on your computer.
  2. Create a new HTML file.
  3. Copy the code using the 'Copy' button and create an HTML tag then paste the code inside the tag into that HTML file.
  4. Copy the angular js code and paste in the JS file created
  5. Then keep the function lines inside the script tag(refer to preview as well).
  6. Save and run the file directly from the file location to generate the output.


I found this code snippet by searching for 'angular js form processing' you can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

  1. The solution is created in Visual Studio Code 1.75.1.


Using this solution, we are able to  process form using angular js with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to  process form using angular js.

Support

  1. For any support on kandi solution kits, please use the chat
  2. For further learning resources, visit the Open Weaver Community learning page.