在上面的问题我有三个单选按钮,让用户支付余额,最小金额等
当用户点击第三个单选按钮时,它会打开一个带有输入的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 回答
这是因为
otherAmountpay
字段仍然无效,因为它已被标记为必需,即使未显示角度仍将验证它 . 因此,您需要根据需要验证的情况使"required"约束条件在您的文本框上(仅当选择了"other pay"时) . 你可以使用ng-required
. 即ng-required="pay=='otherAmount'"
,仅在选择其他金额时设置必填字段 .Plnkr