CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
vaibhav
vaibhav

Reputation: 784

Not Able to access ng-model value in controller

I am having a code in which I am trying to access the ng-model values inside the angular controller but getting undefined everytime I am trying to call the ng-model value.

Code

var app = angular.module("app", []);
app.controller("ctrl", function($scope) {

  $scope.phoneNumberValidation = function(phoneNumber) {
    if ($scope.phoneIsVisited == false) {
      $scope.phoneIsVisited = true;
    }

    if (!isNaN(phoneNumber) && phoneNumber.length === 11) {
      $scope.phoneNumberErrorShow = false;
      $scope.pincodeErrorshow = false;
      $scope.phoneNumbervalid = true;
    } else if ($scope.postCodeIsvisited) {
      console.log("went till here");
      console.log(phoneNumber);
      if (!phoneNumber === undefined) {

        console.log("inside else");
        $scope.phoneNumberErrorShow = true;
        $scope.phoneNumbervalid = false;

      } else {

        $scope.phoneNumberErrorShow = true;
        $scope.pincodeErrorshow = true;
        $scope.phoneNumbervalid = false;
      }
    }

  };


});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="col-md-4" ng-app="app" ng-controller="ctrl">
  <input type="text" minLength="10" maxLength="11" data-ng-model="phoneNumber" data-ng-blur="phoneNumberValidation(phoneNumber)" name="phoneNumber" class="form-control" data-sly-test=${!properties.phoneno} placeholder="Phone number" />
  <input type="text" minLength="10" maxLength="11" data-ng-model="phoneNumber" data-ng-blur="phoneNumberValidation(phoneNumber)" name="phoneNumber" class="form-control" data-sly-test=${properties.phoneno} placeholder="${properties.phoneno}" />
  <span class="error_msg" data-ng-show="phoneNumberErrorShow">Please enter a valid phone number</span>
</div>

Upvotes: 0

Views: 961

Answers (3)

Akhil Arjun
Akhil Arjun

Reputation: 1137

The problem is with the minlenght and maxlength conditions you have set in your inputs.

So unless the model value reaches those limit they never would be reflected/bonded to the model value.

Upvotes: 1

Naghaveer R
Naghaveer R

Reputation: 2944

I think that you have the problem with IF conditions. It is not going inside else if statements. Check whether "$scope.phoneIsVisited" variable is true before do validations

var app = angular.module("app", []);
app.controller("ctrl", function($scope) {

  $scope.phoneNumberValidation = function(phoneNumber) {

   //Alert if it is defined
    if (phoneNumber !== undefined) {
      alert("Phone Number:" + phoneNumber);
    }
    if ($scope.phoneIsVisited == false) {
      $scope.phoneIsVisited = true;
    }

    if (!isNaN(phoneNumber) && phoneNumber.length === 11) {
      $scope.phoneNumberErrorShow = false;
      $scope.pincodeErrorshow = false;
      $scope.phoneNumbervalid = true;
    } else if ($scope.postCodeIsvisited) {
      console.log("went till here");
      console.log(phoneNumber);
      if (phoneNumber !== undefined) {
        alert("Phone Number:" + phoneNumber);
        console.log("inside else");
        $scope.phoneNumberErrorShow = true;
        $scope.phoneNumbervalid = false;

      } else {

        $scope.phoneNumberErrorShow = true;
        $scope.pincodeErrorshow = true;
        $scope.phoneNumbervalid = false;
      }
    }

  };


});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="col-md-4" ng-app="app" ng-controller="ctrl">
  <input type="text" minLength="10" maxLength="11" data-ng-model="phoneNumber" data-ng-blur="phoneNumberValidation(phoneNumber)" name="phoneNumber" class="form-control" data-sly-test=${!properties.phoneno} placeholder="Phone number" />
  <input type="text" minLength="10" maxLength="11" data-ng-model="phoneNumber" data-ng-blur="phoneNumberValidation(phoneNumber)" name="phoneNumber" class="form-control" data-sly-test=${properties.phoneno} placeholder="${properties.phoneno}" />
  <span class="error_msg" data-ng-show="phoneNumberErrorShow">Please enter a valid phone number</span>
</div>

Upvotes: 0

Fab
Fab

Reputation: 668

phoneNumber needs to be in the scope.

So Set it as $scope.phoneNumber instead of setting phoneNumber in param of the function.

UPDATE

In the controller, before the function, set $scope.phoneNumber = null; Remove the phoneNumber param of the function and replace all phoneNumber to $scope.phoneNumber.

In the view, remove the param when you call the function.

Upvotes: 0

Related Questions