Question

PLUNKER LINK

在上面的问题中，我有三个单选按钮，让用户支付余额，最小金额等当用户点击第三个单选按钮时，它会打开一个带有输入的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>

Answer 1

这是因为otherAmountpay字段仍然无效，因为它已被标记为必需，即使未显示角度仍将验证它。所以你需要制作＆＃34; required＆＃34;根据您需要验证文本框的条件约束条件（仅当＆＃34;其他付费＆＃34;被选中时）。您可以使用ng-required。即ng-required="pay=='otherAmount'"，仅在选择其他金额时设置必填字段。

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

<强> Plnkr

表单验证和禁用按钮

1 个答案: