How to show length of input in minlength validation angularjs

Question

form name="form" novalidate autocomplete="off" role="form">

textarea name="firstname" id="firstname"  required data-ng-model="name" maxlength="160" minlength="50"></textarea> 

      div ng-messages="form.firstname.$error" role="alert">
          span ng-message="required">
              Please enter Name
          </span>   
        span ng-message="minlength">
          {{ 50 - name.length}}
        </span>                                   
      /div>
/form>

So here In the minlength I need to show the length also, but it doesn't show. Please help.

Problem is you are using maxlength, use angular way ng-maxlength ,ng-minlength — Matej Marconak
– Matej Marconak, Commented Mar 15, 2017 at 6:21

Community · Accepted Answer · 2017-05-23 12:17:21Z

Try this

<textarea name="firstname" id="firstname" required ng-model="firstname" ng-maxlength="160" ng-minlength="50"></textarea>
<div ng-show="myForm.firstname.$dirty" role="alert">
  <span ng-show="myForm.firstname.$error.required"> Please enter Name
  </span>
  <span ng-show="myForm.firstname.$error.minlength"> Please enter atleast 50 characters
  </span>
  <span ng-show="myForm.firstname.$error.maxlength"> Maximum allowed characters are 160
  </span>
</div>

var app = angular.module("app", []);
app.controller("ctrl", function($scope) {

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <form name="myForm" novalidate autocomplete="off" role="form">

    <textarea name="firstname" id="firstname" required ng-model="firstname" ng-maxlength="160" ng-minlength="50"></textarea>
    <div ng-show="myForm.firstname.$dirty" role="alert">
      <span ng-show="myForm.firstname.$error.required"> Please enter Name
      </span>
      <span ng-show="myForm.firstname.$error.minlength"> Please enter atleast 50 characters
      </span>
      <span ng-show="myForm.firstname.$error.maxlength"> Maximum allowed characters are 160
      </span>
    </div>
  </form>
</div>

Here you are trying to do both HTML validation as well as Angular validation

angularjs ng-minlength validation is not working, form still being submitted

If you just want to show min length, You can do this

  <span ng-show="firstname.length < 50"> Please enter atleast {{50 - firstname.length}} characters
  </span>

var app=angular.module("app",[]);
app.controller("ctrl",function($scope){

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <form name="myForm" novalidate autocomplete="off" role="form">

    <textarea name="name" id="firstname" required ng-model="firstname" maxlength="160" minlength="50"></textarea>
    <div ng-show="myForm.name.$dirty" role="alert">
      <span ng-show="myForm.name.$error.required"> Please enter Name
      </span>
      <span ng-show="firstname.length < 50"> Please enter atleast {{50 - firstname.length}} characters
      </span>
    </div>
  </form>
</div>

This is not what I need. Its the easy way out. I asked for the dynamic input length even in the minlength validation

Amal · Accepted Answer · 2017-03-15 05:49:46Z

0

Try this code

<div ng-app='demo'>
        <div ng-controller='loadData'>
      <form name="form" novalidate autocomplete="off" role="form">
    <textarea name="firstname" id="firstname" ng-model="name" maxlength="60" minlength="50" ng-trim="false"></textarea> 
    <div ng-messages="form.firstname.$error" role="alert"><span ng-message="required">Please enter Name</span></br><span ng-message="minlength">min-Length:{{ 50 - name.length}}</span></div>
    </form>
        </div>
        </div>

DEMO

edited Mar 15, 2017 at 5:49

answered Mar 15, 2017 at 5:36

Amal

3,4261 gold badge14 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to show length of input in minlength validation angularjs

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related