Return false Angular code if text area is empty

Question

var myApp = angular.module("myApp", []);
myApp.controller("votesController", ['$scope', function($scope, $timeout) {
  $scope.comments = [
  ];
  $scope.newComment = {
    likes: 0
  };  
  $scope.createComment = function() {
    if ($scope.newComment.comment != "") {
      $scope.comments.push({
        comment: $scope.newComment.comment,
        likes: $scope.newComment.likes,
        likeColor : {},
        dislikeColor : {}
      });
    }
  };
  $scope.incrementLikes = function(comment) {
    comment.likes++;
  };
  $scope.decrementLikes = function(comment) {
    comment.likes--;
  };  
}]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="myApp">
  <div ng-controller="votesController">
    <div ng-repeat="comment in comments">
      <div class="comment_box_all">
        <div class="comment_user">
          <div class="comment_note">
            <a id="vote_comment" ng-click="incrementLikes(comment, $index)" class="vote_comment" ng-style="comment.likeColor">Like</a>
            <span class="num_vote_comm_11"> | {{comment.likes}} | </span>
            <a ng-click="decrementLikes(comment, $index)" class="vote_dis_like_comm" ng-style="comment.dislikeColor">Unlike</a>
          </div>
          <div class="content_text_user_ans"><span>{{comment.comment}}</span></div>
        </div>
      </div>
    </div>
    <div class="area_comm_tex">
      <textarea class="text_area" ng-model="newComment.comment" placeholder="Add comment"></textarea>
      <button class="op_comm_now" ng-click="createComment()">Add text</button>
    </div>
  </div>
</div>

Hey, now this is script which add text and can count like or dislike click, but is one problem, this code worsk even if text area is empty (like/dislike is added).

Question: How do that if text area is empty(no any characters, e.g. trim()) this code no works just like return false ?

Use if ($scope.newComment.comment.trim()) { to check if comment contain any string. — Tushar
– Tushar, Commented Mar 21, 2017 at 12:00

blackmiaool · Accepted Answer · 2017-03-21 12:06:32Z

2

You should init your $scope.newComment.comment to make it not undefined.

var myApp = angular.module("myApp", []);
myApp.controller("votesController", ['$scope', function($scope, $timeout) {
  $scope.comments = [
  ];
  $scope.newComment = {
    likes: 0,
    comment:""
  };  
  $scope.createComment = function() {
    if ($scope.newComment.comment != "") {
      $scope.comments.push({
        comment: $scope.newComment.comment,
        likes: $scope.newComment.likes,
        likeColor : {},
        dislikeColor : {}
      });
    }
  };
  $scope.incrementLikes = function(comment) {
    comment.likes++;
  };
  $scope.decrementLikes = function(comment) {
    comment.likes--;
  };  
}]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="myApp">
  <div ng-controller="votesController">
    <div ng-repeat="comment in comments">
      <div class="comment_box_all">
        <div class="comment_user">
          <div class="comment_note">
            <a id="vote_comment" ng-click="incrementLikes(comment, $index)" class="vote_comment" ng-style="comment.likeColor">Like</a>
            <span class="num_vote_comm_11"> | {{comment.likes}} | </span>
            <a ng-click="decrementLikes(comment, $index)" class="vote_dis_like_comm" ng-style="comment.dislikeColor">Unlike</a>
          </div>
          <div class="content_text_user_ans"><span>{{comment.comment}}</span></div>
        </div>
      </div>
    </div>
    <div class="area_comm_tex">
      <textarea class="text_area" ng-model="newComment.comment" placeholder="Add comment"></textarea>
      <button class="op_comm_now" ng-click="createComment()">Add text</button>
    </div>
  </div>
</div>

edited Mar 21, 2017 at 12:06

answered Mar 21, 2017 at 12:03

blackmiaool

5,3942 gold badges24 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mat.Now Over a year ago

Thank you very much for help :)

Mat.Now Over a year ago

In JS i can use .val('') to clear text area after add comment, in Angular is similiar option too?

blackmiaool Over a year ago

Your description of the question made others misunderstand it. Maybe describe it more clear next time. @V.R

blackmiaool Over a year ago

just use $scope.newComment.comment="" then @V.R

Brmmmm · Accepted Answer · 2017-03-21 12:04:32Z

2

You could do something like this:

$scope.incrementLikes = function(comment) {
   if(comment.comment != null && comment.comment.length > 0)  comment.likes++;
};

$scope.decrementLikes = function(comment) {
    if(comment.comment != null && comment.comment.length > 0)  comment.likes--;
};

edited Mar 21, 2017 at 12:04

answered Mar 21, 2017 at 11:55

Brmmmm

1527 bronze badges

Comments

Ankit Kumar Gupta · Accepted Answer · 2017-03-21 12:10:49Z

var myApp = angular.module("myApp", []);
myApp.controller("votesController", ['$scope', function($scope, $timeout) {
  $scope.comments = [
  ];
  $scope.newComment = {
    likes: 0
  };  
  $scope.createComment = function() {
    if ($scope.newComment.comment != "") {
      $scope.comments.push({
        comment: $scope.newComment.comment,
        likes: $scope.newComment.likes,
        likeColor : {},
        dislikeColor : {}
      });
    }
  };
  $scope.incrementLikes = function(comment) {
  if($scope.newComment.comment && $scope.newComment.comment.length){
   comment.likes++;
  }

  };
  $scope.decrementLikes = function(comment) {
if($scope.newComment.comment && $scope.newComment.comment.length){
    comment.likes--;
}
  };  
}]);

you checked first whether text is empty.if text is empty.donot do increment or decrement.

Collectives™ on Stack Overflow

Return false Angular code if text area is empty

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related