javascript - AngularJS Validation - ng-minlength on textarea - Stack Overflow

admin管理员组

文章数量:1434363

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

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!

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

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!

• javascript
• angularjs
• validation

Share Improve this question Follow edited Jul 30, 2018 at 9:01 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Jun 24, 2014 at 7:10 J86J86 15.3k5050 gold badges145145 silver badges250250 bronze badges 3

• 2 You have ng-disabled="paymentForm.$valid"; it should be the opposite. Also, are you sure this will work with the buttons outside the form? – Nikos Paraskevopoulos Commented Jun 24, 2014 at 7:18
• The button seems to work outside the form; a small amendment to the above: You will also need to specify ng-required="true" for the empty field to be invalid; otherwise ng-minlength seems not to take effect on empty fields. Fiddle – Nikos Paraskevopoulos Commented Jun 24, 2014 at 7:22
• Thanks @NikosParaskevopoulos Can you please reply as Answer? Your suggestions fixed it. :) – J86 Commented Jun 24, 2014 at 7:23

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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 remend against it; I have a feeling it would not work in all cases (but cannot prove it right now :)

Relevant fiddle: http://jsfiddle/J2JA6/

本文标签： javascriptAngularJS Validationngminlength on textareaStack Overflow