CODEWITHSUNDEEP
javascriptangularjs
MattDionis
MattDionis

Reputation: 3616

ng-disabled behaving strangely

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.

Upvotes: 1

Views: 92

Answers (1)

Robin-Hoodie
Robin-Hoodie

Reputation: 4974

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.

Upvotes: 1

Related Questions