1

柱塞链接

在上面的问题中，我有三个单选按钮，让用户支付余额、最低金额和其他金额
。当用户点击第三个单选按钮时，它会打开一个带有输入的 div，用户可以在其中输入他们的
金额，并且该字段有一些验证。它随后对下一个字段集进行了一些验证。我想禁用提交按钮，直到表单有效。但即使我在单选按钮中选择余额或最低金额付款选项，提交按钮仍处于禁用状态（等待表单有效。可能正在寻找验证，这是第三个选项）。我怎样才能避免这种情况？

HTML

  <fieldset  class="form-group clearfix">
     <legend class="">Fieldset Title</legend>
        <ul class="vList">
            <li>
             <input type="radio" class="" name="balancePayment" id="payBalance"  ng-model="pay"     
                     value="balanceAmount" />
              <label class="" for="payBalance"> Balance:$130 </label>
            </li>
            <li>
              <input type="radio" class="form__radio" name="balancePayment" id="payMinimum"  ng-model="pay" 
                     value="minimumAmount"/>
              <label class="" for="payMinimum"> Minimum Amount:$4 </label>
            </li>
            <li>
              <input type="radio" class="" name="balancePayment" id="payOther" ng-model="pay" 
                 value="otherAmount"/>
              <label class="form__radioLabel" for="payOther"> Pay Different Amount </label>
            </li>
      </ul>
          <div class="otherpayment" ng-show ="pay=='otherAmount'" ng-class="{
                            'has-error':  myform.otherAmountpay.$invalid && myform.otherAmountpay.$dirty,
                            'has-success':myform.otherAmountpay.$valid}">
                <span class="help-block" ng-show="myform.otherAmountpay.$error.required &&  
                      myform.otherAmountpay.$dirty">Please enter your payment</span>
                <input  id="Tel1" name="otherAmountpay" ng-model="otherAmountpay" 
                       class="form-control" type="number" required=""/>
          </div>
  </fieldset>
4

1 回答 1

1

这是因为该otherAmountpay字段仍然无效，因为它已被标记为必填，即使未显示角度仍会对其进行验证。因此，您需要根据需要验证它的时间（仅在选择“其他支付”时）在文本框上设置“必需”约束条件。您可以使用ng-required. ie ng-required="pay=='otherAmount'", set required field only when the option other amount is selected.

<input  id="Tel1" name="otherAmountpay" ng-model="otherAmountpay" 
                       class="form-control" type="number" ng-required="pay=='otherAmount'"/>

PLNKR

于 2014-09-28T02:59:46.090 回答