In my main JavaScript file, I have a collection of functions that are used throughout my application. This JS file also handles the routing of the app.
main.js (MainController):
$stateProvider
.state('page1', {
url : '/',
templateUrl : 'page1.html',
controller : "Page1Controller"
})
.state('page2', {
url : '/',
templateUrl : 'page2.html',
controller : "Page2Controller"
});`
Within Page 2, there is a form:
<div class="outer" ng-controller="MainController">
<div class="page" ng-init="test();">
<form id="page2_form" name="page2_form">
<input type="text" id="field1" name="field1"/>
<input type="text" id="field2" name="field2"/>
</form>
</div>
</div>
To validate the form using scope, I am currently getting an undefined result. I am using $scope.$watch to check this.
page2.js (Page2Controller):
$scope.$watch('page2_form', function(page2_form) {
console.log(page2_form);
});
The output is "undefined". Even though the controller is loaded through routing, why is the form not being displayed?
UPDATE
Solution:
I added $scope.form = {}; to page2.js (Page2Controller) and modified the form like this:
<form id="form.page2_form" name="form.page2_form"></form>
Now, I can access fields in the form with
$scope.form.page2_form[fieldname]
Although, I'm puzzled as to why I have to do this now when in previous applications I did not need to specify form.form_name.