表单验证和禁用的按钮

PLUNKER LINK表单验证和禁用的按钮

在上述问题，我具有让用户付费余额，最小量和第三单选按钮其他
amount.When用户点击三个单选按钮它打开了与输入一个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>

来源

2014-09-28 future

这是行不通的，那是因为你需要的项目，无论如何，即使隐藏的原因。只有在实际需要时才需要，例如ng-required = {..}或使用嵌套的ng表单元素 – 2014-09-28 02:52:34

谢谢。使用ng-required = {..} :) – future 2014-09-28 03:00:25

btw约翰洛克从LOST ??哈哈 – future 2014-09-28 03:00:55

这是因为根据需要将其已经被标记，即使不显示的角度仍然会验证它otherAmountpay领域仍然无效。因此，您需要根据您需要验证的时间（仅在选择“其他付款”时），根据您的文本框制定“必需”约束条件。您可以使用ng-required。即ng-required="pay=='otherAmount'"，仅在选择其他金额时设置必填字段。

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

Plnkr

来源

2014-09-28 02:59:46 PSL

表单验证和禁用的按钮

回答

相关问题