CODEWITHSUNDEEP
angularjs
Coding Duchess
Coding Duchess

Reputation: 6909

Cannot access form field using AngularJS

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?

Upvotes: 0

Views: 61

Answers (3)

Abdul Mateen Mohammed
Abdul Mateen Mohammed

Reputation: 1894

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>

Upvotes: 0

Aravind
Aravind

Reputation: 41573

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>

Upvotes: 0

k10der
k10der

Reputation: 726

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)

Upvotes: 1

Related Questions