submit AngularJS form with many dynamically created inputs

Question

I am generating a set of three inputs per object in a JSON array. This is a simple mockup showing how I do this for two objects. I cannot seem to figure out how to grab all the inputs and submit it "the AngularJS way." Note that I chose to use ng-value over ng-model for the first two number inputs since the former collides with bootstrap in a really ugly way.

Is there some straightforward way to just grab all the input values and submit them, like you would do with a standard form?

HTML:

<form name="editForm" class="form-horizontal" ng-submit="saveEdit()">
<table class="edit_table table table-striped">
        <thead>
          <tr>
            <th class="action_name_cell">Action</th>
            <th class="float_cell">Warning Threshold</th>
            <th class="float_cell">Error Threshold</th>
            <th class="toggle_cell">Enabled</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="row in edit_rows()">
            <td class="action_name_cell">test</td>
            <td class="float_cell">
              <div class="form-group">
                <div class="col-sm-8">
                <input type="number" class="form-control" name="{{row.threshold_id}}_warningDecimal"
                       placeholder="10.0" ng-value="row.warning"
                       ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/"
                       step="0.1" required />
                </div>
              </div>
            </td>
            <td class="float_cell">
              <div class="form-group">
                <div class="col-sm-8">
                <input type="number" class="form-control" name="{{row.threshold_id}}_errorDecimal"
                       placeholder="10.0" ng-value="row.error"
                       ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/"
                       step="0.1" required />
                </div>
              </div>
            </td>
            <td class="toggle_cell">
              <label></label><input name="{{row.threshold_id}}_enabled" type="checkbox" ng-checked="row.enabled" data-toggle="toggle">
            </td>
          </tr>
        </tbody>
      </table>
  <div class="base_button_wrapper">
    <button type="submit" class="btn btn-success">Save</button>
    <button ng-click="cancelEdit()" type="button" class="btn btn-default">Cancel</button>
  </div>
</form>

JS:

angular.module('rtmApp')
  .controller('EditCtrl', ['$scope', '$location', '$window', '$timeout',
    function ($scope, $location) {

      // Change views and show the main view
      $scope.cancelEdit = function() {
        $location.path('/');
      };

      // Save, confirm success, then show the main again
      $scope.saveEdit = function() {
        console.log('Here is the data we are saving...');
        // Let's see if we can see the data we are saving/submitting here:
        console.log("? How do I get all the data ?");
        $location.path('/');
      };


      var dummyEditJSON = [{
                            "threshold_id": 1,
                            "action_id": 1,
                            "action_name": "fast_preview",
                            "site_id": 1,
                            "site_name": "test_site",
                            "warning": 3.5,
                            "error": 5.0,
                            "enabled": true
                          },
                          {
                            "threshold_id": 2,
                            "action_id": 2,
                            "action_name": "bill_cgi",
                            "site_id": 1,
                            "site_name": "test_site",
                            "warning": 2.6,
                            "error": 4.2,
                            "enabled": false
                          }
                        ];
      $scope.edit_rows = function() {
        return dummyEditJSON;
      };


  }]);

Hi @jacobIRR I don't have much time to create a proper answer, but I think this article might help you: scotch.io/tutorials/… — Gene Parcellano
– Gene Parcellano, Commented Aug 16, 2017 at 21:14
Thanks @GeneParcellano but the comments in that thread have the same unanswered question I have (how to actually submit the data) — JacobIRR
– JacobIRR, Commented Aug 16, 2017 at 21:45

yBrodsky · Accepted Answer · 2017-08-17 00:16:55Z

1

Your inputs have to be binded to an object. You do that with the ng-model directive. Take a look at this example: http://jsfiddle.net/krvom1ja/

$scope.data = {
        a: 'a',
      b: [{
        v: 'b'
      }, {
        v: 'c'
      }]
    }

Assuming this is your form data, you keep it all in the same place. Then, when you submit the form, you simply grab $scope.data.

Also, your array of inputs is an actual array (look at key b)

answered Aug 17, 2017 at 0:16

yBrodsky

5,0614 gold badges24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JacobIRR Over a year ago

Thanks, this worked out well once I used ng-model everywhere.

Collectives™ on Stack Overflow

submit AngularJS form with many dynamically created inputs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related