AngularJS - text input value not reflecting in scope variable

Question

I have an input text field as :

<input type="text" class="form-control" id="inputValue" name="uservalue" ng-model="inputNumber" ng-required="true" autofocus="true" ng-blur="checkIfValid()"/>

My controller has the ng-blur function as follows:

$scope.checkIfValid = function(){
        console.log("Value is = " + $scope.inputNumber);
}

I have defined - $scope.inputNumber = '';

My console.log shows an empty value even though I input a value in the text field and hit 'Tab' or move on to the next field to invoke the ng-blur function.

What am I doing wrong here? `

try with ng-change instead ng-blur for debug purposes. also +1 for a plunker detailing the problem. — Sombriks
– Sombriks, Commented Aug 19, 2016 at 6:24
agreed on a plunker - how are the controller/directives tied together? — mr rogers
– mr rogers, Commented Aug 19, 2016 at 6:27
Does your console displays Value is = or does it not display anything? — Kaushal Niraula
– Kaushal Niraula, Commented Aug 19, 2016 at 6:28
1) Did you by any chance forget to add ng-app and ng-controller ? 2) Change ng-blur to ng-change. 3) add a $watch for inputValue and see if it displays anything in the log — Kaushal Niraula
– Kaushal Niraula, Commented Aug 19, 2016 at 6:44

User · Accepted Answer · 2016-08-19 06:36:22Z

3

Check this

var app = angular.module("myapp", []);
app.controller("myCtrl", ['$scope', function($scope) {
    $scope.inputNumber="new";
  
  $scope.checkIfValid = function(){
        console.log("Value is = " + $scope.inputNumber);
}
  
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">  
  <div ng-controller="myCtrl">
   <input type="text" class="form-control" id="inputValue" name="uservalue" ng-model="inputNumber" ng-required="true" autofocus="true" ng-blur="checkIfValid()"/>
    
    <h1>{{inputNumber}}</h1>
  </div>
</div>

answered Aug 19, 2016 at 6:36

User

1,3735 gold badges29 silver badges61 bronze badges

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

3 Comments

221b Over a year ago

Even though your answer is correct - this is what worked for me : I passed inputNumber as a parameter to checkifValid(inputNumber) and then the value enters my controller, any idea why this is happening?

User Over a year ago

Hi, i didnot get , you want to pass value as parameter

221b Over a year ago

Yeah - I passed the ng-model as a parameter , and that worked - I can get the value now in my controller .. but $scope.inputNumber doesn't seem to be binding to the value in input in the text box - any idea why?

Collectives™ on Stack Overflow

AngularJS - text input value not reflecting in scope variable

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related