AngularJS ng-model binding issue with input type=email element

Question

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;">&nbsp;</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);
    }
});

Neither of your <input> fields have a name attribute, which is required to POST data. — Obsidian Age
– Obsidian Age, Commented Jul 16, 2017 at 22:39
I'm trying to get them through angular. The password value is shown in the console log. But the email is not shown — Ela Buwa
– Ela Buwa, Commented Jul 16, 2017 at 22:41
It sounds as though you may be looking for two-way binding. Are you attempting to log what the user inputs into each field? In that case, you're looking for {{$scope.user.pass}} and {{$scope.user.email}}. — Obsidian Age
– Obsidian Age, Commented Jul 16, 2017 at 22:47
@ObsidianAge I'm trying to get the email,password and send to an api to verify them. The console only shows the password. The email field is not even shown as an array object element. — Ela Buwa
– Ela Buwa, Commented Jul 16, 2017 at 22:50

georgeawg · Accepted Answer · 2017-07-16 23:19:49Z

1

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>

answered Jul 16, 2017 at 23:19

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ela Buwa Over a year ago

holly shizzle. u are right. u deserve more than 10.

Zaid Reshamwale · Accepted Answer · 2021-02-02 19:01:19Z

0

It will display email only when the user types the correct email address (i.e [email protected])

<label>EMAIL:</label>
<input type="email" ng-model="uemail"  name="ueamil" placeholder="Enter EMAIL">
<h4> EMAIL: {{uemail}}</h4>

answered Feb 2, 2021 at 19:01

Zaid Reshamwale

611 bronze badge

Collectives™ on Stack Overflow

AngularJS ng-model binding issue with input type=email element

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related