Cannot access form field using AngularJS

Question

I have the following form in my Angular application:

<form id="form1">
    <fieldset>
       <input type="text" name="field1" ng-model="frm.myID" />
       <input type="button" name="btnProcess" class="action-button" value="Process" ng-click="Process()" />
   </fieldset>
</form>

In my controller I have:

var frm = this;

$scope.Process = function() {
   console.log(frm.myID);

}

frm.myID comes up as undefined. What am I missing?

please provide the entire controller definition and HTML block, including where ng-controller is declared. — Claies
– Claies, Commented Nov 11, 2016 at 16:07
this works correctly, with the limited information you provided, as long as one fills in the blanks and makes some assumptions about the rest of the missing code: plnkr.co/edit/71Y2Tzj0hgmWg49g1vH6?p=preview. Something you haven't posted in the question body is not configured properly, and the rest of the code is necessary in order to identify the issue. — Claies
– Claies, Commented Nov 11, 2016 at 16:12
as a side note, if you are using this, you generally shouldn't be saving values on $scope. and if you are using $scope, then the var frm = this is unnecessary. Using both syntaxes at the same time only leads to confusion. — Claies
– Claies, Commented Nov 11, 2016 at 16:14

k10der · Accepted Answer · 2016-11-11 16:11:55Z

1

You're assigning controller function to frm variable in controller code, so the correct console.log should be console.log(frm.frm.myId). Of course, if you're not using controller as syntax.

Update. You probably don't need to frm to this. So try to delete this var frm = this. And it will work with console.log console.log($scope.frm.id)

edited Nov 11, 2016 at 16:11

answered Nov 11, 2016 at 16:08

k10der

7241 gold badge10 silver badges15 bronze badges

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

2 Comments

Claies Over a year ago

that would only be true if frm == $scope, which isn't demonstrated here either.

k10der Over a year ago

Yes, good point. I guess then just there is no need in var frm = this.

Abdul Mateen Mohammed · Accepted Answer · 2016-11-11 16:57:55Z

0

You're not using the object defined on the $scope. Check the below code snippets.

Inside your controller, you seem to be mixing the coding styles i.e. $scope syntax vs. controller aliasing syntax, please go with one approach.

Also please initialize your object to an empty Object i.e. $scope.frm = {};

$scope syntax.

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController);

DefaultController.$inject = ['$scope'];

function DefaultController($scope) {
  $scope.frm = {};

  $scope.Process = function() {
    console.log($scope.frm.myID);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController">
    <form id="form1">
      <fieldset>
        <input type="text" name="field1" ng-model="frm.myID" />
        <input type="button" name="btnProcess" class="action-button" value="Process" ng-click="Process()" />
      </fieldset>
    </form>
  </div>
</div>

controller aliasing syntax. You can use $scope in this syntax too but for doing things like setting up watchers, events, etc.

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController);

function DefaultController() {
  var vm = this;
  vm.frm = {};
  vm.process = process;

  function process() {
    console.log(vm.frm.myID);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <form id="form1">
      <fieldset>
        <input type="text" name="field1" ng-model="ctrl.frm.myID" />
        <input type="button" name="btnProcess" class="action-button" value="Process" ng-click="ctrl.process()" />
      </fieldset>
    </form>
  </div>
</div>

edited Nov 11, 2016 at 16:57

answered Nov 11, 2016 at 16:13

Abdul Mateen Mohammed

1,8841 gold badge13 silver badges21 bronze badges

2 Comments

Coding Duchess Over a year ago

I still get $scope.frm.myID as undefined... Could it be because the page is a partial page, loaded withing another page?

Abdul Mateen Mohammed Over a year ago

Seems to me that you are using controller as syntax, Could you please try as the e.g. code snippet I've given with controller aliasing syntax, initially it will print undefined just type some text and click Process button and check

Aravind · Accepted Answer · 2016-11-11 16:24:19Z

0

myapp= angular.module("app",[])
       myapp.controller("yourControllerName",function($scope){
    var frm = this;
    this.myID = ""; // ur missing
    this.Process = function() {
      
       console.log(frm.myID);

    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<div ng-app="app" ng-controller="yourControllerName as frm">
<form id="form1">
    <fieldset>
       <input type="text" name="field1" ng-model="frm.myID" />
     
       <input type="button" name="btnProcess" class="action-button" value="Process" ng-click="frm.Process()" />
   </fieldset>
</form>
</div>

edited Nov 11, 2016 at 16:24

answered Nov 11, 2016 at 16:09

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

1 Comment

Coding Duchess Over a year ago

I added frm.myID=""; before my function and I already had my controller with as syntax in my config file, but now console.log(frm.myID); comes up as blank

Collectives™ on Stack Overflow

Cannot access form field using AngularJS

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related