首页 文章

表单验证和禁用按钮

提问于
浏览
1

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>

1 回答

  • 1

    这是因为 otherAmountpay 字段仍然无效,因为它已被标记为必需,即使未显示角度仍将验证它 . 因此,您需要根据需要验证的情况使"required"约束条件在您的文本框上(仅当选择了"other pay"时) . 你可以使用 ng-required . 即 ng-required="pay=='otherAmount'" ,仅在选择其他金额时设置必填字段 .

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

    Plnkr

相关问题