Simple AngularJS Form is undefined in Scope

Question

I'm starting to play around with AngularJS forms in jsfiddle and I've come across a problem already where a very simple form example is not working as expected. All I have is a named form and it's not showing up in scope for some reason (I'm expecting a FormController instance).

I have a fiddle set up, and below is the basic code:

HTML

<div id="mainContainer" ng-app="angularTest" ng-controller="MainCtrl">
    <h1>The Form</h1>
    <form name="theForm">
        <input name="myName" type="text" ng-model="model.name" />
        <input name="submit" type="submit" />
    </form>
</div>

JS

var app = angular.module('angularTest', []);

app.controller('MainCtrl', ['$scope', function($scope) {
    $scope.model = { name: 'Model Name' };
    console.log($scope.theForm); //displays 'undefined'
}]);

I can't find a lot of straightforward examples of this on jsfiddle, so I wasn't sure if this could be some strange interaction with sites like it (most examples I find aren't using formal controllers). I've tried on Plunker to check as well, but I encounter the same problem.

I'm sure I'm missing something super obvious, but I can't see many other things to change or tweak here. Any help is greatly appreciated!

I ran into this problem when my form was nested inside an element with ng-if. Using ng-show instead fixed the problem. — yndolok
– yndolok, Commented Jan 8, 2015 at 17:18

NOCARRIER · Accepted Answer · 2017-10-03 08:18:58Z

90

A good way to perform this without using watch (which is a bit overkill) is to define an object in the scope into which you will register the form.

HTML

<div id="mainContainer" ng-app="angularTest" ng-controller="MainCtrl">
    <h1>The Form</h1>
    <form name="form.theForm">
        <input name="myName" type="text" ng-model="model.name" />
        <input type="button" value="Here the scope" ng-click="display()"/>
        <input name="submit" type="submit" />
    </form>
</div>

JS

var app = angular.module('angularTest', []);

app.controller('MainCtrl', ['$scope', function($scope) {
    $scope.model = { name: 'Model Name' };
    $scope.form = {};
    $scope.display = function () {
        console.log($scope.form.theForm);
    }
}]);

edited Oct 3, 2017 at 8:18

NOCARRIER

2,6445 gold badges42 silver badges62 bronze badges

answered Jul 14, 2014 at 22:09

IxDay

3,7072 gold badges25 silver badges27 bronze badges

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

2 Comments

nidal Over a year ago

This might not be the best solution to this problem, but it is generally a good way to bring form validation into the controller. Thanks for sharing.

Tod Thomson Over a year ago

Note trying to bind directly to form won't work it must be form.someNewName.

Michal Charemza · Accepted Answer · 2014-03-16 12:08:35Z

41

The form only registers itself with the $scope of the controller after the controller has initially run. Therefore the console.log($scope.theForm) will return undefined even if everything is setup correctly.

In your example to react to the presence of theForm, you can setup a watcher on theForm to set debug text depending its presence:

$scope.$watch('theForm', function(theForm) {
    if(theForm) { 
        $scope.formDebugText = 'Form in Scope';
    }
    else {
        $scope.formDebugText = 'Form is Undefined';
    }        
});

which can be seen in action at http://jsfiddle.net/9k2Jk/1/

answered Mar 16, 2014 at 12:08

Michal Charemza

27.3k15 gold badges114 silver badges191 bronze badges

4 Comments

chucknelson Over a year ago

Ah, I should have known better. I've already dealt with these types of asynchronous loading behaviors! Thanks! It's all going to sink in eventually ;)

maurycy Over a year ago

If you need to check it only once it's worth removing watch after form reports it's presence var formWatchUnbind = $scope.$watch and then if(theForm){formWatchUnbind(); //do w/e you want here}

dopatraman Over a year ago

this does not work for me. $scope.theForm is always undefined

voila Over a year ago

@michal : Thanks for answer. Any documentation which says 'form' register to scope of controller only when controller had gone through initial run. Would be helpful. thanks

hofnarwillie · Accepted Answer · 2016-02-27 00:56:12Z

32

What fixed it for me was to use a parent object on the $scope.

In the controller:

$scope.forms = {};
$scope.registerUser = function registerUser() {
    if ($scope.forms.userForm.$valid) {
        alert('submit');
    }
};

In the template:

<form name="forms.userForm" ng-submit="registerUser()">

The reason:

If you use <form name="userForm"... instead of <form name="forms.userForm"... it attaches the form to a child scope, but because $scopes use prototypical inheritance, as soon as I declared an empty object literal on the original $scope the form was attached to it instead.

answered Feb 27, 2016 at 0:56

hofnarwillie

3,65010 gold badges54 silver badges77 bronze badges

1 Comment

Basil Over a year ago

So I added ng-controller="MainCtrl" to the form and that seemed to get it to bind directly to that scope. Is there anything wrong about this approach?

justGoscha · Accepted Answer · 2015-01-16 14:11:04Z

23

This is the recommended way to access form variable: https://docs.angularjs.org/guide/forms - Binding to form and control state

In HTML:

<form name="form">  
<input type="button" ng-click="reset(form)" value="Reset" />
</form>

Youl will pass the name of the form as a variable to the function.

In JS :

$scope.reset = function(form) { 
  alert(form); 
};

Variable 'form' should NOT be undefined now.

edited Jan 16, 2015 at 14:11

justGoscha

24.1k16 gold badges52 silver badges61 bronze badges

answered Jan 12, 2015 at 13:10

bogdanmatra

2312 silver badges4 bronze badges

1 Comment

Charlie Schliesser Over a year ago

How would you test this?

Saorikido · Accepted Answer · 2017-11-29 02:31:09Z

4

In my case I used ng-include to generate a sub scope, so within current scope the property is undefined, to be safe and prevent sub-scope issue, we should use reversed variable to name the form just like form.theForm.

But make sure that you've declared this form name in your controller in advance.

<form name="form.theForm">
    <input name="myName" type="text" ng-model="model.name" />
    <input name="submit" type="submit" />
</form>

app.controller('MainCtrl', ['$scope', function($scope) {
    $scope.model = { name: 'Model Name' };
    //You have to declare here, else it will trigger undefined error still.
    $scope.form = {
      theForm: {} 
    };

    $scope.reset = function(){
       $scope.form.theForm.$setPristine();
    }
}]);

edited Nov 29, 2017 at 2:31

answered Feb 28, 2017 at 2:14

Saorikido

2,3102 gold badges27 silver badges37 bronze badges

Comments

Ben Warren · Accepted Answer · 2017-02-17 15:35:14Z

1

You can re-initialize the form from your controller before you try to access $scope.form with this line of code. $scope.form will then be available.

angular.element(jQuery('.form-control')).triggerHandler('input')

answered Feb 17, 2017 at 15:35

Ben Warren

111 bronze badge

Comments

Simon Trewhella · Accepted Answer · 2014-09-01 06:22:13Z

I wrote a directive to deal with this issue. Its an attribute that you can put on your form and pass a function to which will execute when the form is ready.

Javascript

angular.module('app').directive('formInit', function(){
  return {
    restrict: 'A',
    scope: {
      init: '&formInit'
    },
    controller: function($scope, $element){
      var name = null;
      if ($element[0] && $element[0].name){
        name = $element[0].name;
      }

      var listener = $scope.$watch('init', function(){
        if ($scope[name] && $scope.init){
          $scope.init();
          listener();
        }
      });
    }
  };
});

Example HTML

<form name="test" form-init="testing()">

Where testing is a function on your controllers scope.

Collectives™ on Stack Overflow

Simple AngularJS Form is undefined in Scope

7 Answers 7

2 Comments

4 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

4 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related