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指的是我的控制器。此外，此HTML都位于自定义指令的模板中。我不知道这些额外的信息是否有用，但我很难过。

Answer 1

表单不能直接嵌套在<tr>中（请参阅this）。只需使用<td>包裹表单（或者只是将其移到<table>之外），事情就可以了。

ng-disabled表现得很奇怪

1 个答案: