I am currently tackling a project that heavily relies on AngularJS for the front-end. Here's what I am dealing with:
The validation requirement I am aiming for is as follows:
The Next button should remain disabled unless the reason provided is at least 10 characters long.
Furthermore, I would like to display to the user the number of characters remaining before they can submit. This information should be located in the bottom right corner of the textarea.
CODE:
<form name="paymentForm">
<div class="form-group" id="Div2">
<select ng-model="selectedPaymentStatus" ng-options="ps.name for ps in paymentStatus"></select>
</div><!-- .form_group -->
<div ng-show="selectedPaymentStatus.value === 'paymentDeferred'" class="form-group" id="Div3">
<p>Reason</p>
<textarea class="form-control" ng-model="crate.paymentDeferredReason" ng-minlength="10"></textarea>
</div><!-- .form_group -->
</form>
<button class="btn wizard-next-btn pull-right" ng-disabled="paymentForm.$valid" ng-click="nextStep()">Next</button>
<button class="btn wizard-back-btn" ng-click="previousStep()">Back</button>
Unfortunately, the code provided above is not functioning as expected! Despite inputting just one character, the next button is still being enabled!