I have a wierd issue. The email input value is not logged, however the password value is logged. Any idea guys?
<div class="container" ng-controller="loginCtrl"> <div class="row" style="height: 50px;"> </div> <div class="row"> <div class="col-xs-4 col-xs-offset-4" > <div class="form-group"> <label for="emailinput">Email address</label> <input type="email" class="form-control" id="emailinput" ng-model="user.email" placeholder="Enter Email Address"> </div> <div class="form-group"> <label for="passwordinput">Password</label> <input type="password" class="form-control" id="passwordinput" ng-model="user.pass" placeholder="Enter Password"> </div> <div class="form-group"> <button class="btn btn-primary ladda-button" ng-click="verifyCredentials()" data-style="expand-left"> <span class="ladda-label">Login</span> </button> </div> <div class="form-group"> <label for="passwordinput"> <a href="forgotpassword.html">Forgot Password?</a> </label> </div> </div> </div> </div>
My angular code is as below.
var app = angular.module('bookie',[]); app.controller('loginCtrl', function($scope, $http){ $scope.user = {}; $scope.verifyCredentials = function(){ console.log($scope.user); } });
Answer
The email will only show when it is a legal email address:
<script src="//unpkg.com/angular/angular.js"></script> <div ng-app ng-init="user={}"> <div class="form-group"> <label for="emailinput">Email address</label> <input type="email" class="form-control" id="emailinput" ng-model="user.email" placeholder="Enter Email Address"> </div> <div class="form-group"> <label for="passwordinput">Password</label> <input type="password" class="form-control" id="passwordinput" ng-model="user.pass" placeholder="Enter Password"> </div> <div class="form-group"> <button class="btn btn-primary ladda-button" ng-click="verifyCredentials()" data-style="expand-left"> <span class="ladda-label">Login</span> </button> </div> <div class="form-group"> <label for="passwordinput"> <a href="forgotpassword.html">Forgot Password?</a> </label> </div> {{user | json}} </div>