ng-disabled behaving strangely

Question

I'm running into an odd issue while trying to set ng-disabled on my 'Save' button in the code below. I want my input field to be required and to be a non-negative number. This code works great as structured, but when I remove that second form below my table ng-disabled no longer works. Why does ng-disabled depend on this completely unnecessary additional form which I purely added for temporary testing purposes?

<div>  
  <table>
    <tr>
      <td><p>Limit</p></td>
      <td><p>1,000,000</p></td>
      <form class="form-inline" name="form">
        <td>
          <div class="form-group">
            <input type="text" ng-pattern="/^[0-9][0-9]*$/" class="form-control" ng-if="limit.saveAllowed" ng-model="limit.user.points"
               ng-required="true"></input>
          </div>
          <p ng-if="!limit.saveAllowed">{{limit.user.points}}</p>
        </td>
        <td ng-if="limit.saveAllowed">
          <div class="form-group">
            <button class="btn btn-success" type="submit" ng-click='limit.setLimit(limit.user.points)' ng-disabled="form.$invalid">Save</button>
          </div>
        </td>
      </form>
    </tr>
  </table>
  <form class="form-inline" name="form">
    <input type="text" ng-model="limit.user.points"
       ng-required="true"></input>
  </form>
</div>

Note: I am using the controllerAs syntax so limit refers to my controller. Further, this HTML all resides within a custom directive's template. I don't know if that additional info is helpful, but I'm stumped.

not sure if it's the issue but your form isn't nested in a `` but directly in a `` which is not allowed: http://stackoverflow.com/questions/5967564/form-inside-a-table — Robin-Hoodie, Aug 27 '15 at 18:43
@NexusDuck, thank you! That was exactly the problem. I simply moved the form element outside my table and that solved it. Please post your comment as an answer so I can credit you. — MattDionis, Aug 27 '15 at 18:50

score 1 · Accepted Answer · edited May 23 '17 at 11:59

1

Forms can not be nested directly inside a <tr>(see this). Simply wrap the form with a <td> (or just move it outside the <table>) and things should work.

edited May 23 '17 at 11:59

Community

1
1

answered Aug 27 '15 at 18:51

Robin-Hoodie

4,519
4
22
56

ng-disabled behaving strangely

1 Answers1