Angularjs ng-submit not working inside ng-repeat form

Question

I have this form

<tr ng-repeat="quote in quotes">
    <form ng-submit="submit()" name="qut">
        <td class="text-left">
            {[{ quote.business_name }]}
        </td>
        <td class="text-left">
            <span ng-if="quote.quote">
                {[{ quote.quote }]}
            </span>
            <span ng-if="!quote.quote">
                <input ng-model="qt" class="form-control" type="text" name="quote" />
            </span>
        </td>
        <td class="text-left">
            <span ng-if="quote.status==1">
                <input type="submit" class="btn btn-out" value="Quote" />
            </span>
        </td>
    </form>
</tr>

In my controller I have

$scope.submit = function() {
        console.log('form');
    };

If I change ng-submit="submit()" to ng-click="submit()" in button it works, not sure why I am unable to submit the form

lenilsondc · Accepted Answer · 2016-12-02 11:15:29Z

The problem is that you have an illegal html structure by nesting a table > tr element with a form. That causes the inner input[type=submit] not to identify his parent form and trigger the submit.

I could get your example working by replacing tables and tr with div and td with spans.

angular.module('myApp', [])
  .controller('myController', function($scope) {

    $scope.quotes = [{
      business_name: "business_name 1",
      quote: "quote1",
      status: 1
    }, {
      business_name: "business_name 2",
      quote: "quote2",
      status: 1
    }]

    $scope.submit = function() {
      console.log('form');
    };
  });

angular.element(document).ready(function() {
  angular.bootstrap(document, ['myApp']);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-controller="myController">
  <div ng-repeat="quote in quotes">
    <form ng-submit="submit()" name="qut{{$index}}">
      <span class="text-left">
        {{ quote.business_name }}
      </span>
      <span class="text-left">
        <span ng-if="quote.quote">
          {{ quote.quote }}
        </span>
        <span ng-if="!quote.quote">
          <input ng-model="qt" class="form-control" type="text" name="quote" />
        </span>
      </span>
      <span class="text-left">
        <span ng-if="quote.status==1">
          <input type="submit" class="btn btn-out" value="Quote" />
        </span>
      </span>
    </form>
  </div>
</div>

kaushik samanta · Accepted Answer · 2016-12-02 10:14:02Z

1

Because multiple same form names are being created. What you should do is you can create dynamic form names inside ng-repeat.

<tr ng-repeat="quote in quotes">
    <form ng-submit="submit(qut{{$index}}.$valid)" name="qut{{$index}}">
        <td class="text-left">
            {[{ quote.business_name }]}
        </td>
        <td class="text-left">
            <span ng-if="quote.quote">
                {[{ quote.quote }]}
            </span>
            <span ng-if="!quote.quote">
                <input ng-model="quote.quote" class="form-control" type="text" name="quote{{$index}}" />
            </span>
        </td>
        <td class="text-left">
            <span ng-if="quote.status==1">
                <input type="submit" class="btn btn-out" value="Quote" />
            </span>
        </td>
    </form>
</tr>



$scope.submit = function(value) {
    console.log('form',value);
};

answered Dec 2, 2016 at 10:14

kaushik samanta

951 silver badge4 bronze badges

4 Comments

Prabhakaran Over a year ago

It throws syntax error here I think qut{{$index}}.$valid

Prabhakaran Over a year ago

Still unable to submit

kaushik samanta Over a year ago

Try using ng-form<form name="userForm" novalidate> <div class="form-group" ng-repeat="user in formData.users" ng-class="{ 'has-error' : userFieldForm.email.$invalid }"> <ng-form name="userFieldForm"> <label>{{ user.name }}'s Email</label> <input type="text" class="form-control" name="email" ng-model="user.email" required> <p class="help-block" ng-show="userFieldForm.email.$invalid">Valid Email Address Required</p> </ng-form> </div> </form>

Prabhakaran Over a year ago

Where is the ng-submit, each form should have separate ng-submit and type="submit" button

Collectives™ on Stack Overflow

Angularjs ng-submit not working inside ng-repeat form

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related