How to check if a input field has a value in the controller using AngularJS

Question

I'm quite simply trying to find out how I can retrieve the scopes information to see if it has a value or not in the controller.

I need to be able to write an if statement that says if this text input field is filled do this... if else do something different.

<form name="deadlineForm">
    <div class="app-select-date">
        <label for="deadline">Select deadline:</label>
        <input pickadate ng-model="deadline" format="dd/mm/yyyy" placeholder="Select deadline"/>
    </div>
</form>

What is the best way about writing this code in the controller?

SD. · Accepted Answer · 2015-08-13 12:59:10Z

3

You have it bound to a variable (deadline) using ng-model="deadline".

Your check in the controller becomes as simple as:

if ($scope.deadline != null && $scope.deadline != "") {
    //do something
}

or this can be even simplified to

if ($scope.deadline) {
    //do something
}

Simple JSFiddle DEMO.

edited Aug 13, 2015 at 12:59

answered Aug 13, 2015 at 12:33

SD.

9,6071 gold badge27 silver badges57 bronze badges

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

2 Comments

Max Lynn Over a year ago

If you add a fiddle I'll push it through as the correct answer. :)

Max Lynn Over a year ago

Nice one! Thanks for your help everyone!

Phizaz · Accepted Answer · 2015-08-13 12:36:12Z

2

Will this work for you ?

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
  angular.module('app', [])
  .controller('MainCtrl', function ($scope) {
    
    $scope.$watch('val', function (now, old) {
      if (now) {
        $scope.result = 'there is something';
      } else {
        $scope.result = 'there is nothing';
      }
    });
  });
</script>

<div ng-app='app' ng-controller='MainCtrl'>
  <input type="text" ng-model="val">  
  <span ng-bind='result'>
</div>

answered Aug 13, 2015 at 12:36

Phizaz

6227 silver badges18 bronze badges

2 Comments

Kushal Over a year ago

Using $watch is a costly operation and from my point of view it should be avoided as much as possible

Phizaz Over a year ago

You seem to be right .. I think so .. but if there is another way to trigger code on the javascript side without using it I like to hear it as well :D

Hmahwish · Accepted Answer · 2015-08-13 12:33:27Z

1

You will get the value in the input as,

$scope.deadline

you can check as ,

if($scope.deadline) {  //or whatever condition you have to check null or empty
   //anything you want to do
}

answered Aug 13, 2015 at 12:33

Hmahwish

2,2328 gold badges27 silver badges45 bronze badges

Comments

Ganesh Yadav · Accepted Answer · 2017-08-02 12:02:24Z

1

As from what I understand here it is:

<form name="deadlineForm">
    <div class="app-select-date" ng-if="deadline && deadline != ''">
        <label for="deadline">Select deadline:</label>
        <input pickadate ng-model="deadline" format="dd/mm/yyyy" placeholder="Select deadline"/>
    </div>
    <div ng-if="!deadline && deadline == ''">do something else</div>
</form>

edited Aug 2, 2017 at 12:02

Ganesh Yadav

2,6852 gold badges33 silver badges53 bronze badges

answered Aug 13, 2015 at 12:33

Kushal

1,3706 silver badges16 bronze badges

Comments

User2 · Accepted Answer · 2015-08-13 12:49:18Z

0

Please check working example : DEMO

HTML:

<p>Data {{deadline}}!</p>
<div ng-if="deadline">There is date</div>
<div ng-if="!deadline">There is no date</div>

Only for testing
<button ng-click="makeDateEmpty()">Empty data</button>

Controller:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
    $scope.deadline = '02/02/2002';
    //For testing only
    $scope.makeDateEmpty = function () {
           $scope.deadline = "";
    }
});

answered Aug 13, 2015 at 12:49

User2

1,3038 silver badges17 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:00:06Z

Using ng-model automatically binds any value entered into the input to a $scope variable of the same name.

This variable becomes available to plain JavaScript within your controller when you inject a dependency upon scope into it.

So $scope.deadline will give the current value of text entered into that input.

How you check that value depends on the context of when you'd like to check it.

If you're in an existing function, such as a function checking field validation upon form submission, a simple

if ($scope.deadline) {
   // do something
} else {
  // do something else
}

would suffice.

If you're looking to trigger your logic the moment that input field changes, in the controller you could use the $watch directive, as Konpat Ta Preechakul suggested, or you could add an ng-change or ng-blur attribute to your input, and call a controller-side function:

<input pickadate ng-model="deadline" format="dd/mm/yyyy" placeholder="Select deadline" ng-change="selectedDate()"/>

and

$scope.selectedDate = function(){
    if ($scope.deadline) {
       // do something
    } else {
      // do something else
    }
}

If you want conditional logic to occur directly in the view, bound real-time to values in the input field, then ng-if, ng-show, and ng-hide can be helpful:

<span ng-show="deadline">Show this if deadline has a value</span>
<span ng-hide="deadline">Don't show this if deadline has a value</span>
<span ng-if="!deadline">Don't render this into the DOM at all if deadline doesn't have a value</span>

Collectives™ on Stack Overflow

How to check if a input field has a value in the controller using AngularJS

6 Answers 6

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related