I've been working on a simple AngularJS application that includes a form with two fields. However, I've run into an issue where I'm unable to read the values entered in these fields from my controller, as I keep getting 'undefined'. Despite thoroughly reviewing my code multiple times, I haven't been able to pinpoint the problem. I'm hoping someone can provide some insight on what I might be overlooking and how I can resolve this issue.
Important Note: The AngularJS version I'm using is the latest release 1.2
Here is a snippet of my code:
'use strict';
var myApp = angular.module('myApp', ['ngRoute','ngSanitize']);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/index',
{ templateUrl: 'templates/common/index.html',
controller: 'IndexController'
}).
when('/editcontact',
{ templateUrl: 'templates/contacts/editContact.html',
controller: 'editContactController'
}).
otherwise({redirectTo: '/index'});
}]);
Additionally, here are excerpts from the relevant HTML and controller files:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>myApp</title>
....
....
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="lib/angular/angular-sanitize.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/contacts/editContactController.js"></script>
</body>
</html>
Furthermore, here's a snippet of the form in editContact.html:
<form name="editContactForm">
<div>
<fieldset>
<input id="name" type="text" placeholder="Name..." ng-modal="contacts.name">
<input id="phone" type="text" placeholder="Phone" ng-modal="contacts.phone">
</fieldset>
<button type="submit" ng-click="saveContact(contacts, editContactForm)">Save</button>
<button type="button" ng-click="cancelEdit()">Cancel</button>
</div>
</form>
Lastly, here is a snippet from the editContactController:
myApp.controller('editContactController',
function editContactController($scope){
$scope.saveContact = function(contacts, editContactForm){
if(editContactForm.$valid){
console.log(contacts.name);
}
};
});