javascript - ng-disabled 行为异常

Question

我在尝试在下面的代码中的“保存”按钮上设置 ng-disabled 时遇到了一个奇怪的问题。我希望我的输入字段是必需的并且是非负数。这段代码在结构化方面效果很好，但是当我删除表下面的第二个表单时，ng-disabled 不再起作用。为什么 ng-disabled 依赖于这个完全不必要的附加表单，我纯粹是为了临时测试目的而添加的？

<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>

注意:我使用 controllerAs 语法，因此 limit 指的是我的 Controller 。此外，该 HTML 全部驻留在自定义指令的模板中。我不知道这些附加信息是否有帮助，但我很困惑。

Answer 1

表单不能直接嵌套在 <tr> 内(参见this)。 只需用 <td> 包裹表格即可(或者只是将其移到 <table> 之外)，事情应该可以正常工作。