angularjs model value is undefined in form

Question

I have two forms(in one page). On first form there are two buttons NEXT and BACK. On clicking on the next i will render next form on page. I am using ng-if for this condition.

<form name="otpform" novalidate ng-if="renderotpform">
  <fieldset ng-disabled="otpdisable">
    <div class="middle-container steps fourth-step overflow-hidden" id="divotp">
      <input class="" type="text" name="otp" placeholder="{{ 'OTP' | translate }}" ng-model="otp" required >
      <input type="button" value="{{ 'BACK' | translate }}" class="brown-button" ng-click="gotoAck()">
      <input type="submit" value="{{ 'NEXT' | translate }}" class="blue-button" ng-click="checkotp()">
    </div>
  </fieldset>
</form>

Below is my js code.

 $scope.checkotp = function () {
                debugger;
                var otpvalue;
                $scope.otp = {};
                otpvalue = $scope.otp; //undefined
              }

When I try to access the otp model I am getting undefined property. On previous form I have next button. Inside next button I have $scope.renderotpform = true; so that above form is shown. May I know why I am not able to access OTP in the above code?

why you are doing this? $scope.otp = {}; It will assign otp value to black object. — Jenny, Aug 03 '17 at 09:02
Thank you. I removed $scope.otp={} and still i am getting undefined. — Niranjan Godbole, Aug 03 '17 at 09:05
Its will be undefine untill you enter any value to text box; — Jenny, Aug 03 '17 at 09:05
i have entered some value. I have checkotp() function. On clicking on that i am checking the value. Hope you understood. — Niranjan Godbole, Aug 03 '17 at 09:07
Then please create fiddle to see whole code, that must be something making otp blanck — Jenny, Aug 03 '17 at 09:09
i removed ng-if="renderotpform" and started working fine. may i know what is wrong with my ng-if? — Niranjan Godbole, Aug 03 '17 at 09:11
When your renderotpform will be false or undefined , it will not load form in which otp textbox exist. so that will not assign $scope.otp to any value or infact it will not populate $scope.otp. — Jenny, Aug 03 '17 at 09:15
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/150923/discussion-between-niranjan-godbole-and-jenny). — Niranjan Godbole, Aug 03 '17 at 09:17
one can make use of `ng-show` instead of `ng-if` as the latter removes the content from the DOM itself, whereas the former just hides it, when the condition becomes _false_. — Shashank, Aug 03 '17 at 09:20

Vivz · Accepted Answer · 2017-08-03T09:59:37.517

ng-if creates its own scope. So the otp inside ng-if is not binded directly to the controller.You can either bind the model to an object or use controller as syntax. The controller as syntax implicitly takes care of the dot rule.

For more info:

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  var vm=this;
  vm.renderotpform = true;
  vm.checkotp = function() {
    console.log(vm.otp);
  }
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl as vm">
    <form name="otpform" novalidate ng-if="vm.renderotpform">
      <fieldset ng-disabled="otpdisable">
        <div class="middle-container steps fourth-step overflow-hidden" id="divotp">
          <input class="" type="text" name="otp"  ng-model="vm.otp" required>
          <input type="button" value="BACK" class="brown-button" ng-click="vm.gotoAck()">
          <input type="submit" value="NEXT" class="blue-button" ng-click="vm.checkotp()">
        </div>
      </fieldset>
    </form>
  </div>

Your answer also solves the problem by using objects. When we use objects the binding will happen directly to the parent scope. — Vivz, Aug 03 '17 at 09:54
Yeah i know but "ng-if creates a child scope" is new to me. and you exaplained well why the code in the question did not worked. — Gaurav Srivastava, Aug 03 '17 at 09:56

score 1 · Answer 2 · answered Aug 03 '17 at 09:29

Make all ng-models of the Form from one Object..

It would work and there are other advantages for this like you could easily reset and post data with just one object.:-

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.formData = {};
  $scope.renderotpform = true;
  $scope.checkotp = function() {
    console.log($scope.formData.otp);
  }
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">
    <form name="otpform" novalidate ng-if="renderotpform">
      <fieldset ng-disabled="otpdisable">
        <div class="middle-container steps fourth-step overflow-hidden" id="divotp">
          <input class="" type="text" name="otp"  ng-model="formData.otp" required>
          <input type="button" value="BACK" class="brown-button" ng-click="gotoAck()">
          <input type="submit" value="NEXT" class="blue-button" ng-click="checkotp()">
        </div>
      </fieldset>
    </form>
  </div>

angularjs model value is undefined in form

2 Answers2