Check whether input field is empty in Controller - AngularJS

Question

I just started learning AngularJS. In a testing program I wrote, I need to check whether my input field is empty or not inside the controller(script).

Following is the code I wrote

<div ng-controller="ExampleController">
    <input type="text" ng-model="userFirstName" required/><br>
    <p ng-bind="msg"></p>
</div>

<script>
    var mainApp = angular.module("mainApp", []);
    mainApp.controller('ExampleController', function ($scope) {

       if($scope.userFirstName.length === 0){
          $scope.msg = "pls enter something";
       }else{
          $scope.msg = "Something Entered";
       }
    });
</script>

Here, as the output, I expected to see pls enter something. But I cannot see anything.

But If I change the script in to following with some small changes, it shows me Something Entered as expected.

<script>
   var mainApp = angular.module("mainApp", []);
   mainApp.controller('ExampleController', function ($scope) {
        $scope.userFirstName = 'Something';
        if($scope.userFirstName.length === 0){
             $scope.msg = "pls enter something";
        }else{
             $scope.msg = "Something Entered";
        }
   });
</script>

What is wrong here? As far as I understand, the first one should work if the second one works as expected. Otherwise, both should not work.

I think I have not understood something very basic. If so, please describe me what I have not read about.

Thank You..!

Arno_Geismar · Accepted Answer · 2016-08-08 09:49:04Z

1

The problem is that you are only checking if the scope property is filled in once. (this happens when angular initializes the controller) What you need to do is add an ng-change to the html and then when the model changes the function will fire again.

In the function you do your logic again. like so :

var mainApp = angular.module("mainApp", []);
   mainApp.controller('ExampleController', function ($scope) {
        $scope.userFirstName = '';
        $scope.checkContent = function(){
          if($scope.userFirstName.length === 0 || typeof $scope.userFirstName === 'undefined'){
             $scope.msg = "pls enter something";
          }else{
             $scope.msg = "Something Entered";
           }
         } 

   });

then in your html:

<div ng-controller="ExampleController">
    <input type="text" ng-change="checkContent()" ng-model="userFirstName" required/><br>
    <p ng-bind="msg"></p>
</div>

edited Aug 8, 2016 at 9:49

answered Aug 8, 2016 at 8:51

Arno_Geismar

2,3301 gold badge19 silver badges30 bronze badges

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

3 Comments

vigamage Over a year ago

only works for 'something entered'. When the text box is cleared, it does not work as expected

Arno_Geismar Over a year ago

@vigamage I updated my answer I think you will need to do an undefined or null check. Kind regards

vigamage Over a year ago

yes, that is it. length check is not needed I think.

Varit J Patel · Accepted Answer · 2016-08-08 08:55:37Z

1

well, .length works with an array. here you don't have type of $scope.userFirstName as an array.

modify it like

<div ng-controller="ExampleController">
  <input type="text" ng-model="userFirstName" required="" />
  <br />
  <p ng-bind="msg"></p>
</div>
<script>
  var mainApp = angular.module("mainApp", []);
  mainApp.controller('ExampleController', function ($scope) {
    $scope.userFirstName = '';
     if($scope.userFirstName === ''){
        $scope.msg = "pls enter something";
     }else{
        $scope.msg = "Something Entered";
     }
  });
</script>

Please find plunker here: https://plnkr.co/edit/7gc3fj8apFJnE2wNJbQ7?p=preview

Hope it helps you!

answered Aug 8, 2016 at 8:55

Varit J Patel

3,5201 gold badge15 silver badges23 bronze badges

1 Comment

vigamage Over a year ago

Thank you for the tip of 'length'. But this solution does not work

Kirit · Accepted Answer · 2016-08-08 09:03:57Z

0

try with this one, create function and call it on Change event

if(!$scope.userFirstName || $scope.userFirstName == null){
                $scope.msg = "pls enter something";
            }else{
                $scope.msg = "Something Entered";
            }

edited Aug 8, 2016 at 9:03

answered Aug 8, 2016 at 8:54

Kirit

4253 silver badges18 bronze badges

Comments

Pengyy · Accepted Answer · 2017-04-07 09:39:34Z

0

var mainApp = angular.module("mainApp", []);
mainApp.controller('ExampleController', function ($scope) {
    $scope.userFirstName = '';
    $scope.checkContent = function(){
        if($scope.userFirstName)//Check Empty Field
        {
            $scope.msg = "pls enter something";
        }else{
            $scope.msg = "Something Entered";
        }
    } 

});

edited Apr 7, 2017 at 9:39

Pengyy

38.3k15 gold badges85 silver badges73 bronze badges

answered Apr 7, 2017 at 7:30

S.Elavarasan

837 bronze badges

Collectives™ on Stack Overflow

Check whether input field is empty in Controller - AngularJS

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related