Why is my email tag is passing empty email attribute?

Question

Hi I have this form for registration and for some reason when I put in an email that finishes with .com the value is not passed to the scope variable.

THe validation was taken from other sources just adjusted to my needs.

register.html

<a class="navbar" href="#/welcome" style="color: #000000;"> <<< Home</a>

<div class="intro-header fadein">
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <div class="page-header" >
                    <h1 style="color: black; text-align: left">Register</h1>
                </div>
                <form name="register_form" novalidate ng-submit="register()">
                    <div class="input-group">
                        <input type="email"
                               name="email"
                               class="form-control"
                               placeholder="Email"
                               ng-model="user.email"
                               ng-maxlength=20
                               required/>
                        <div class="error fadein"
                             ng-show="register_form.email.$dirty && register_form.email.$invalid">
                            <small class="error fadein"
                                   ng-show="register_form.email.$error.required" style="color: black">
                                Your email is required.
                            </small>
                            <small class="error fadein"
                                   ng-show="register_form.email.$error.email" style="color: black">
                                Please input a valid email.
                            </small>
                        </div>
                    </div>
                    <div class="input-group">
                        <input type="text"
                               name="username"
                               class="form-control"
                               placeholder="Username"
                               ng-model="user.username"
                               ng-minlength=3
                               ng-maxlength=20
                               ensure-unique="username"
                               required
                               />
                        <div class="error fadein"
                             ng-show="register_form.username.$dirty && register_form.username.$invalid">
                            <small class="error fadein"
                                   ng-show="register_form.username.$error.required" style="color: black">
                                Your username is required.
                            </small>
                            <small class="error fadein"
                                   ng-show="register_form.username.$error.minlength" style="color: black">
                                Must be at least 3 characters
                            </small>
                            <small class="error"
                                   ng-show="register_form.username.$error.maxlength" style="color: black">
                                Maximum 20 characters
                            </small>
                            <small class="error fadein"
                                   ng-show="register_form.username.$error.unique" style="color: black">
                                This username is taken.</br>
                                Please choose another one.
                            </small>
                        </div>
                    </div>
                    <div class="input-group">
                        <input type="password"
                               name="password"
                               class="form-control"
                               placeholder="Password"
                               ng-model="user.password"
                               ng-minlength="8"
                               ng-maxlength="20"
                               required>
                        <div class="error fadein"
                             ng-show="register_form.password.$dirty && register_form.password.$invalid">
                            <small class="error fadein"
                                   ng-show="register_form.password.$error.required" style="color: black">
                                Your password is required.
                            </small>
                            <small class="error fadein"
                                   ng-show="register_form.password.$error.minlength" style="color: black">
                                Must be at least 8 characters
                            </small>
                            <small class="error fadein"
                                   ng-show="register_form.password.$error.maxlength" style="color: black;">
                               Maximum 20 characters
                            </small>

                        </div>
                    </div>
                    <input type="submit" class="btn btn-default" id="register_button" value="Register">
                </form>

            </div>

        </div>
    </div>
    <!-- /.container -->
</div>

authCtrl.js

angular.module('theNotesApp')
    .controller('authCtrl',['$scope', '$state', 'Auth',  function($scope, $state, Auth) {
        $scope.login = function() {
            Auth.login($scope.user).then(function () {
                $state.go('home');
            });
        };
        $scope.register = function() {
            console.log($scope.user);
            Auth.register($scope.user).then(function () {
                $state.go('home');
            });
        };
    }])

I am new to Web Development. Improvement suggestions for the code are welcome.

Answer 1

You have put a ng-maxlength of 20 on your input field with type 'email'. The email address you have used in the example you provided is 21 characters long, therefore it is invalid and Angular doesn't assign it to the user.email.

Either increase the ng-maxlength or the better option would be to get rid of it completely.