How to process form using angular js

by shivanisanju03 Updated: Mar 9, 2023

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

Angularjs Form Processing

Lines of Code : 111License : Strong Copyleft (CC BY-SA 4.0)

Dependent Libraries :

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

Install Visual Studio Code IDE on your computer.
Create a new HTML file.
Copy the code using the 'Copy' button and create an HTML tag then paste the code inside the tag into that HTML file.
Copy the angular js code and paste in the JS file created
Then keep the function lines inside the script tag(refer to preview as well).
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.

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

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

Open Weaver – Develop Applications Faster with Open Source

Terms
Privacy policy

How to process form using angular js

Code

Instructions

Environment Tested

Support

Open Weaver – Develop Applications Faster with Open Source

kandi

Community and Support

Company

Follow