How to have dynamically created form elements in AngularJS?

Question

My view has:

  <div class="well well-sm" ng-repeat="item in receivingItems">
    {{ item.sku }}: {{ item.description }}<br />
    <form class="form-horizontal" role="form">
      <div class="form-group">
        <label class="col-sm-2 control-label">Quantity</label>
        <div class="col-sm-10">
          <input type="number" class="form-control" placeholder="">
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">Lot</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" placeholder="">
        </div>
      </div>
    </form>
  </div>
  <form class="form-inline" role="form">
    <div class="form-group">
      <label class="sr-only">SKU</label>
      <input type="text" ng-model="receivingValue" placeholder="SKU" typeahead="sku for sku in getSku($viewValue) | filter:$viewValue" typeahead-on-select="selectedSku()" class="form-control" autocomplete="off" autocapitalize="off">
    </div>
  </form>

In my controller, I have:

  $scope.selectedSku = function() {
    var sku = $scope.receivingValue.split(':')[0];
    ItemService.getBySku(CompanyService.getCompany()._id, $scope.selectedClient._id, sku).then(function(response) {
      $scope.receivingItems.push(response.data.item);
      $scope.receivingValue = null;
    });
  }

So this does what you'd expect. When you search for a SKU, it creates a new form with a Quantity and Lot field. But now when I submit the overall form, I want those values to somehow be stored and saved. So how can I use ng-model (or do I not have to?) for dynamic field elements?

Answer 1

Because of the way you have this I would suggest you use ng-form like this, so you can encapsulate a form within a form, and use still the validation features Angular provides:

$scope.mySubmit = function(items) {
    myResource.ajaxProcessItems(items)
    .success(function(response) {
        //
    });
};

<div ng-form ng-submit="mySubmit(receivingItems)" name="myParentForm">
    <div class="well well-sm" ng-repeat="item in receivingItems">
        {{ item.sku }}: {{ item.description }}<br />
        <div ng-form class="form-horizontal" role="form" name="{{item.description}}">
          <div class="form-group">
            <label class="col-sm-2 control-label">Quantity</label>
            <div class="col-sm-10">
              <input type="number" 
                ng-model="item.sku"
                class="form-control"
                placeholder=""
                name="sku">
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">Lot</label>
            <div class="col-sm-10">
              <input type="text"
                class="form-control"
                placeholder=""
                ng-model="item.description"
                name="description" />
            </div>
          </div>
        </form>
    </div>
    <button type="submit">Submit</button>
</div>