wmash wmash - 1 month ago 15
AngularJS Question

ng-model not seeming to bind

I am trying to pass values of

input
's back to the controller using
ng-model
.

I have tried setting the
ng-model
to
email
, but, when logged to the console, returned
undefined
.
I've has a look at these 2 sources:



But, when I have used the dot notation, nothing is logged to the console at all. (not even
'Email: '
)


I only get the error of:


TypeError: Cannot read property 'email' of undefined


HTML:

<ion-view title="Register" hide-nav-bar="true" nav-transition="none" id="page9">
<ion-content padding="true" class="manual-ios-statusbar-padding" scroll="false">
<form id="register-form4" class="list">
<ion-list id="register-list4">
<label class="item item-input" id="register-input7">
<input type="email" ng-model="reg.email" placeholder="Email">
</label>
<label class="item item-input" id="register-input9">
<input type="password" ng-model="reg.password" placeholder="Password">
</label>
</ion-list>
<a ui-sref="tabsController.myTrips" id="register-button7" ng-click="register()" class="button button-positive button-block">Create Account</a>
<a ui-sref="login" id="register-button8" class="button button-positive button-block button-clear">Back</a>
<div ng-show="isError">{{ loginError }}</div>
</form>
</ion-content>
</ion-view>


Controller:

.controller('registerCtrl', ['$scope', '$stateParams', "$firebaseAuth",
function ($scope, $stateParams, $firebaseAuth) {
$scope.register = function() {
var email = $scope.reg.email,
password = $scope.reg.password;

console.log("Email: " + email);
console.log("Password: " + password);

// ...
}
}])


Also, I have played around with the HTML type (changed it to
text
) but still get the same error.

Answer

I suspect the problem is this:

You are using $scope.reg.email, but you have not initialized $scope.reg. In your controller constructor, you need a line like this:

$scope.reg = {};

Without that, $scope.reg is undefined and you get the "Cannot read property 'email' of undefined" error.