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!
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);
}
}]);
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/
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With