ng-submit not triggering in angularjs

Question

I got no error in my console, but my ng-submit is just not triggering. I debug by putting something in my controller, it did trigger, means it's not the problem of my controller not loading.. Below is my source code

(function() {
angular.module('MyApp')
    .controller('SignupCtrl', SignupCtrl);

SignupCtrl.$inject = ['$scope', '$rootScope', '$location', '$window', '$auth'];

function SignupCtrl($scope, $rootScope, $location, $window, $auth) {
  console.log('hello') // triggered
    var ctrl = this;
    ctrl.signup = signup;

    function signup() {
      console.log('trigger') // nope??
   }
}
});

View

<form ng-submit="signup()">
<div class="form-group">
  <label for="name">First Name</label>
  <input required type="text" name="fname" id="fname" placeholder="First Name" class="form-control" ng-model="user.fname" autofocus>
</div>
<button type="submit" class="btn btn-success">Sign up</button>
</form>

Do you have an alias for your controller? like SignupCtrl as vm or something like that? — Kunso Solutions
– Kunso Solutions, Commented Sep 4, 2016 at 4:31
@Mikki strange, I do $scope.signup = function(){ alert() }; it can work, why? — Maria Jane
– Maria Jane, Commented Sep 4, 2016 at 4:38
you have declared your controller without $scope but declared your view as if you are using $scope. The controller is using the Controller As syntax, i.e. ng-controller = "SignupCtrl as ctrl", so you would need ng-submit="ctrl.signup()" and something similar with your ng-model items. — Claies
– Claies, Commented Sep 4, 2016 at 4:46

RandyDaddis · Accepted Answer · 2016-09-04 05:44:26Z

try this:

signup.js

(function () {
    /* jshint validthis: true */
    'use strict';

    angular
        .module('MyApp')
        .controller('Signup', Signup);

    Signup.$inject = ['$scope', '$rootScope', '$location', '$window', '$auth'];

    function Signup($scope, $rootScope, $location, $window, $auth) {
        var vm = this;
        vm.signup = signup;
        vm.user = ...;

        function signup() {
            console.log('trigger');
        }
    }
})();

signup.html

<section id="signup-view" data-ng-controller="Signup as vm">
    <form>
        <div class="form-group">
            <label for="name">First Name</label>
            <input required type="text" name="fname" id="fname" placeholder="First Name" class="form-control" ng-model="vm.user.fname" autofocus>
        </div>
        <button class="btn btn-success" data-ng-click="vm.signup()">Sign up</button>
    </form>
</section>

As a side note, you missed two ';' in your code. I suggest you regularly test your JS code with a tool like JSHint.

@MariaJane if you don't use controller you will not be able to access dom elements with angularJS.
@MariaJane can you update your full code the in question so we know what's going on

Collectives™ on Stack Overflow

ng-submit not triggering in angularjs

1 Answer 1

signup.js

signup.html

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

signup.js

signup.html

4 Comments

Linked

Related