CODEWITHSUNDEEP
javascriptangularjsvalidation
J86
J86

Reputation: 15237

AngularJS Validation - ng-minlength on textarea

I am working on a project where AngularJS is used heavily for the front-end. Here is what I have:

textarea with buttons underneath

The validation rule I want to have is as follows:

The Next button should be disabled unless the reason inputted is at least 10 characters.

Also, I'd like to be able to tell the user how many characters are left before he / she is able to submit. This would go in the bottom right hand 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>

For some reason the above code is not working! Even when I type a single character, the next button gets enabled!

Upvotes: 2

Views: 4769

Answers (1)

Nikos Paraskevopoulos
Nikos Paraskevopoulos

Reputation: 40298

You need to make two corrections:

  1. ng-disabled="paymentForm.$valid" should actually be ng-disabled="paymentForm.$invalid"
  2. Add ng-required="true" to the <textarea>; otherwise ng-minlength seems not to take effect on empty fields.

Also the button being outside the form seems to work ok, but I would recommend against it; I have a feeling it would not work in all cases (but cannot prove it right now :)

Relevant fiddle: http://jsfiddle.net/J2JA6/

Upvotes: 5

Related Questions