CODEWITHSUNDEEP
javascriptangularjs
Max Lynn
Max Lynn

Reputation: 1778

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

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?

Upvotes: 4

Views: 29838

Answers (6)

Kushal
Kushal

Reputation: 1360

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>

Upvotes: 1

Beofett
Beofett

Reputation: 2429

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>

Upvotes: 0

SD.
SD.

Reputation: 9559

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.

Upvotes: 3

User2
User2

Reputation: 1293

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

Upvotes: 0

Phizaz
Phizaz

Reputation: 622

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>

Upvotes: 2

Hmahwish
Hmahwish

Reputation: 2232

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
}

Upvotes: 1

Related Questions