如何在最小長度驗證中顯示輸入的長度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> 

所以這裏在最小長度中我還需要顯示長度，但它不顯示。請幫忙。

Answer 1

試試這個代碼

<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

Answer 2

試試這個

<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>

在這裏，你正在嘗試做的兩個HTML驗證以及角驗證

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

如果你只是想顯示最小長度，你可以這樣做

<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>