Question

我有以下形式我想在其底部启用/禁用按钮，只有当表单和子表单有效但现在它仅使用表单输入验证它似乎不使用子表单（ng- form）输入以验证：

这是我需要的最小版本：

<!-- FORM BEGINNING -->
<form name="medsRefundForm" novalidate>
  <div class="card">

    <!-- NAME -->
    <label class="item fields" ng-click="isKeyboardOpenToTrue()">
      <input type="text"
             ng-model="userName"
             ng-blur="showFootBar()"
             name="username"
             ng-required="true"
             placeholder="Nombre del titular de la poliza">
    </label>
    <!-- ID NUMBER -->
    <label class="item fields" ng-click="isKeyboardOpenToTrue()">
      <input type="number"
             ng-model="idNumber"
             ng-blur="showFootBar()"
             ng-required="true"
             name="idnum"
             placeholder="Cédula / Nit">
    </label>
    <p>SUBFORM START</p>

    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                          INNER SUBFORM
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
    <ng-form name="subform">

      <!-- TITLE HOLDER NAME -->
      <label class="item fields">
        <input  type="text" placeholder="Nombre del titular de la poliza"
               ng-required="true"
               ng-click="showFootBar()">
      </label>
      <!-- TITLE HOLDER ID NUMBER -->
      <label class="item fields">
        <input  type="number" placeholder="Cédula / Nit"
               ng-required="true"
               ng-click="showFootBar()">
      </label>
    </ng-form>

    <div class="bottom-placeholder">
    </div>
  </div>
  <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
          I WANT TO ENABLE/DISABLE THIS BUTTON WHEN FORM IS VALID
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div ng-hide="isKeyboardOpen">
  <button class="button button-block btn-policy"
          ng-disabled="!medsRefundForm.$valid"
          ng-click="continueForm()">ENABLE THIS WITH VALIDATION</button>
</div>
</form>

现在是一个示例链接： http://play.ionic.io/app/8460480dc650

我的完整HTML类是我在pastebin中更复杂的链接：http://pastebin.com/veevkdAp

Answer 1

请参阅此更新的演示：http://play.ionic.io/app/0e46ee98e06b
您可以使用此medsRefundForm.subform.$valid访问子表单的有效性，并且需要以ng-disabled条件将其设置为

ng-disabled="!medsRefundForm.$valid || !medsRefundForm.subform.$valid"

另外，您需要将ng-model放入子表单输入元素。你错过了那些。在为输入元素提供模型之前，角度验证不起作用。请参阅以下代码，您错过了模型

<input  type="text" placeholder="Nombre del titular de la poliza" ng-required="true" ng-click="showFootBar()">

有关更多理解，请参阅此example。

表单和子表单输入有效时启用按钮

1 个答案: