0

I've got a form to collect signup details from a user, defined as such:

<form class="m-t-xl" ng-submit="signup(user)" novalidate>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Name" required="" ng-model="user.name">
            </div>
            <div class="form-group">
                <input type="email" class="form-control" placeholder="Email" required="" ng-model="user.email">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Company" required="" ng-model="user.company">
            </div>
            <div class="form-group">
                <input type="password" class="form-control" placeholder="Password" required="" ng-model="user.password">
            </div>
            <div class="form-group">
                <div class="checkbox i-checks"><label> <input type="checkbox"><i></i> Agree the terms and policy </label></div>
            </div>
            <button type="submit" class="btn btn-primary block full-width m-b">Register</button>

            <p class="text-muted text-center"><small>Already have an account?</small></p>
            <a ui-sref="login" class="btn btn-sm btn-white btn-block">Login</a>
</form>

For some reason, when I click the submission button, nothing happens. The button is just dead. My controller has the following code:

.controller('registerCtrl', ['$scope', '$state', 'Registration', 
                            function($state, $scope, Registration) {

    $scope.user = {
        name: '',
        email: '',
        company: '',
        password: ''
    };
    console.log('controller getting loaded');
    $scope.signup = function(user) {
        console.log('register getting called');
    }
}]);

It acts as if the form doesn't recognise the "signup" method. In a similar fashion, I implemented a login form with:

<form class="m-t" ng-submit="login(credentials)" novalidate>
            <div class="form-group">
                <input type="email" class="form-control" placeholder="Email" required="" ng-model="credentials.email">
            </div>
            <div class="form-group">
                <input type="password" class="form-control" placeholder="Password" required="" ng-model="credentials.password">
            </div>
            <button type="submit" class="btn btn-primary block full-width m-b">Login</button>

            <a ui-sref="forgot_password"><small>Forgot password?</small></a>
            <p class="text-muted text-center"><small>Do not have an account?</small></p>
            <a class="btn btn-sm btn-white btn-block" ui-sref="register">Create an account</a>
</form>

and:

.controller('loginCtrl', ['$scope', '$rootScope', '$state', 'Authentication', 'AUTH_EVENTS', 
                        function($scope, $rootScope, $state, Authentication, AUTH_EVENTS) {

    $scope.credentials = {
        email: '',
        password: ''
    };

    $scope.login = function(credentials) {
        Authentication.login(credentials).then(function(user) {
            $rootScope.$broadcast(AUTH_EVENTS.loginSuccess);
            $scope.setCurrentUser(user);
            $state.go('events');
        }, function () {
            $rootScope.$broadcast(AUTH_EVENTS.loginFailed);
        });
    }
}]);

The second form is working just as intended... I am at a loss as to what is going on. I would like to say that I logged the registerCtrl and it is getting loaded properly into the page, however the method doesn't do anything when called.

Any ideas to what else might cause this? I checked all the solutions already on SO but nothing seemed to help.

In my config.js, both routes are similarly declared:

.state('login', {
            url: "/login",
            templateUrl: "views/login.html",
            data: { pageTitle: 'Login', specialClass: 'gray-bg' }
        })
        .state('register', {
            url: "/register",
            templateUrl: "views/register.html",
            data: { pageTitle: 'Register', specialClass: 'gray-bg' }
        })

I also tried changing my form to have a ng-click on the "Register" button that calls the same method, but this had the same behaviour.

Thanks!

2
  • Did you check your console for errors? Are you sure that the right $scope is used for the signup form? Commented Nov 17, 2015 at 15:39
  • There are no errors. I also checked to see whether "user" was in scope, and adding {{ user }} as debugging text shows the correct text as I fill the forms in. So the "user" variable is synchronized just fine. Commented Nov 17, 2015 at 15:41

1 Answer 1

2

In "registerCtrl" controller you have $scope and $state mixed:

.controller('registerCtrl', ['$scope', '$state', 'Registration', 
                        function($state, $scope, Registration) {}]);

It should be:

.controller('registerCtrl', ['$scope', '$state', 'Registration', 
                        function($scope, $state, Registration) {}]);

I think the problem is you are assigning user object and login function to the wrong application object.

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

1 Comment

Wow... I actually had no idea order mattered on DI. Thanks man... saved me a lot of headaches.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.