Question

我想要在表单有效时保持启用提交表单的按钮：

<button class="button button-clear button-positive" ng-click="submitForm(data)" ng-disabled="myForm.$invalid">
  Salvar
</button>

<form name="myForm">
  <label class="item item-input">
    <span class="input-label">Nome</span>
      <input type="text" placeholder="Nome da categoria" ng-model="data.Categoria.name" required>
   </label>
</form>

我认为问题是按钮在表单之前，所以他们没有“看到”myForm。$ invalid。如果你问我为什么我不能把按钮放在窗体里面，是因为这个按钮在应用程序的条形标题上，而且表格是下面的。

我该如何处理这种情况？

Answer 1

您可以使用ng-form指令。 ng-form

  <button class="button button-clear button-positive" ng-click="submitForm(data)" ng-disabled="myForm.$invalid">
       Salvar
  </button>

  <div data-ng-form name="myForm">
      <label class="item item-input">
        <span class="input-label">Nome</span>
        <input type="text" placeholder="Nome da categoria" ng-model="data.Categoria.name" required>
    </label>
  </div>

Answer 2

您可以尝试设置包含两个控件的表单：

<form name="myForm">
  <button class="button button-clear button-positive" ng-click="submitForm(data)" ng-disabled="myForm.$invalid">
    Salvar
  </button>
  <label class="item item-input">
    <span class="input-label">Nome</span>
      <input type="text" placeholder="Nome da categoria" ng-model="data.Categoria.name" required>
   </label>
</form>

或者如果您不想破坏布局或不需要表单，请ng-form directive：

<div class="item item-input-inset" ng-form="myForm">
  <button class="button button-clear button-positive" ng-click="submitForm(data)" ng-disabled="myForm.$invalid">
    Salvar
  </button>
  <label class="item item-input">
    <span class="input-label">Nome</span>
      <input type="text" placeholder="Nome da categoria" ng-model="data.Categoria.name" required>
   </label>
</div>

表单有效时启用按钮

2 个答案: