Jyina Jyina - 4 months ago 19
Javascript Question

How to set maxlength on input field based on a different combo box value in AngularJS?

I have a payment form which accepts credit card information. The CVV field is set to accept only up to 4 numeric characters. Is there a way in AngularJS to change the maxlength to 3 or 4 based on card type that is chosen in a different combo box?

Thank you!

<div class="form-group">
<div class="row">
<div class="col-md-4">
<label for="cvv">CVV <span style="color:red;">*</span></label>
</div>
<div class="col-md-4">
<input type="text" class="form-control" name="cvv" id="cvv" numbers-only="numbers-only" maxlength="4" ng-model="paymentForm.CVV" required />
</div>
</div>
</div>

<div class="form-group">
<div class="row">
<div class="col-md-4">
<label for="cardType">Card Type</label>
</div>
<div class="col-md-4">
<select id="cardType" class="form-control" ng-options="opt for opt in cardTypes" ng-model="paymentForm.CardType"></select>
</div>
<div class="col-md-4">
<img ng-src="~/images/credit-card-logos.png" class="logosImage" />
</div>
</div>
</div>

Answer

Use ng-maxlength. E.g. ng-maxlength="paymentForm.CardType == 1 ? 3 : 4"

Comments