CODEWITHSUNDEEP
angularjstwitter-bootstrap
Mat.Now
Mat.Now

Reputation: 1725

Dynamically show textarea length

I have a problem, I would like to make counter that count characters in textarea, it restrict how many character you should add, that is for add comment with fixed length. I have used ng-model="seeMore.comment" intextareaand I would like to dynamically show the length of the textarea, so I am using

  • {{seeMore.comment.length}}` but it is not working. Have you any idea? what's wrong with this code?

    .controller('seeMoreCtrl', function($scope, User, $location, $window, $timeout){ 

var app = this;

app.AddComment = function(comment, valid) {     
    app.disabled = true;
    app.loading = true;
    app.errorMsg = false; 
    if(valid){
        var userComment = {}; 

        userComment._id = app.currentProduct;
        userComment.comment = app.comment;

        User.postComment(userComment).then(function(data){  
            if(data.data.success){ 
                app.successMsg = 'Dzękujemy za Twoją opinię!';
                app.loading = false;
                $timeout(function(){
                    $scope.seeMore.comment = '';
                    app.AddCommentForm.$setPristine();  
                    app.AddCommentForm.$setUntouched(); 
                    app.successMsg = false;
                },2000)
            } else {
                app.disabled = false;
                app.loading = false;
                app.errorMsg = data.data.message;
            }    
        });    
    } else {
        app.disabled = false;
        app.loading = false; 
        app.errorMsg = 'Twoja opinia nie została dodana. Musisz dodać jakąś treść.';
        $timeout(function(){
            app.AddCommentForm.$setPristine();  
            app.AddCommentForm.$setUntouched();   
            app.errorMsg = false;
        },3000)
    }
}
})


<form name="seeMore.AddCommentForm" ng-submit="seeMore.AddComment(comment, seeMore.AddCommentForm.$valid)" novalidate>  
  <div ng-class="{'has-success':(seeMore.AddCommentForm.comment.$valid && !seeMore.AddCommentForm.comment.$pristine), 'has-error':(!seeMore.AddCommentForm.comment.$valid && !seeMore.AddCommentForm.comment.$pristine) || (!seeMore.AddCommentForm.comment.$valid &&  seeMore.AddCommentForm.$submitted)}">  
     <textarea class="form-control" id="text-area-comment" name="comment" ng-model="seeMore.comment" ng-minLength="10" required></textarea>
     <ul ng-show="(!seeMore.AddCommentForm.comment.$pristine && seeMore.AddCommentForm.comment.$error.minlength)" class="help-block comment-conditions">
       <li>{{ 10 - seeMore.comment.length}}</li>   
     </ul>  
     <button class="btn btn-warning button-comment-user">Add comment</button>                     
  </div>
</form>

    Upvotes: 2

    Views: 64

    • Answers (1)

    Fetrarij
    Fetrarij

    Reputation: 7326

    Since you use a validator ( `ng-minlength="10" ) the model you use in ng-model will not be updated unless the input is valid. So unless you add more than 10 char in your textarea, seeMore.comment will not have a value.

    Take a loook in the custom directive paragraph here:

    Each function in the $validators object receives the modelValue and the viewValue as parameters. AngularJS will then call $setValidity internally with the function's return value (true: valid, false: invalid). The validation functions are executed every time an input is changed ($setViewValue is called) or whenever the bound model changes. Validation happens after successfully running $parsers and $formatters, respectively. Failed validators are stored by key in ngModelController.$error.

    Your solution is to use directly the $viewValue according this input & minlength validato. Since you can acces the form object by seeMore.AddCommentForm (form's name attr), So just use seeMore.AddCommentForm.$error.minlength[0].$viewValue.length

    <ul ng-show="(!seeMore.AddCommentForm.comment.$pristine && seeMore.AddCommentForm.comment.$error.minlength)" class="help-block comment-conditions">
        <li>{{ 10 - seeMore.AddCommentForm.$error.minlength[0].$viewValue.length}}</li>
  </ul>

    Upvotes: 3

    Related Questions