CODEWITHSUNDEEP
angularjs
vigamage
vigamage

Reputation: 2113

Check whether input field is empty in Controller - AngularJS

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

Upvotes: 3

Views: 26178

Answers (4)

S.Elavarasan
S.Elavarasan

Reputation: 83

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";
        }
    } 

});

Upvotes: 0

Arno_Geismar
Arno_Geismar

Reputation: 2330

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>

Upvotes: 1

Kirit
Kirit

Reputation: 415

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";
            }

Upvotes: 0

Varit J Patel
Varit J Patel

Reputation: 3520

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!

Upvotes: 1

Related Questions