ng-submit doesn't fire anything in form

Question

I have a basic problem and I can't understand why it isn't working

<div class="footer">
    <div class="row writing">
        <p>{{slogan}}</p>
    </div>
    {{send()}} //check if the function is there
    <div class="container">
        <form name="userForm" ng-submit="send()" novalidate>
            <div class="form-group col-md-6">
                <ng-form name="userMail">
                    <input name="mail" type="email" ng-model="varmail" class="form-control" placeholder="Your mail" required>
                    <!--<p class="help-block" ng-show="userMail.mail.$invalid">Valid Email Required</p>-->
                </ng-form>
            </div>
            <div class="form-group col-md-6">
                <ng-form name="userMarket">
                    <input type="text" ng-model="varmarket" class="form-control" placeholder="huhu"
                        required>
                </ng-form>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary flat-butt">{{butLabel}}</button>
            </div>
        </form>
    </div>
</div>

So I can see the function is there but the ng-submit doesn't fire anything. Notice that this is isolated scope and the function was passed in successfully.

Thank you.

UPDATE: I created a Plunk here and it doesn't work either http://plnkr.co/edit/CULSC4ajGfid25sEaT34?p=preview

Answer 1

There is nothing wrong with the code that you have posted (functionally) .

1. Start debugging by checking your console for any error messages.
2. Take a look at your send function that your passing to the ngForm directive, and that it's in scope.
3. Check your HTML markup for that file. Perhaps you have trailing <form> tags that are obfuscating the form you are targeting with your submit button.

If you are using nested controllers, try to make use of the "controller as" syntax so that you can avoid accessing your functions and variables from the $scope that's created from each one.

Also, I do not see why you have extra ngForm directives around your inputs within the form. It doesn't appear to be necessary from what you've posted.

Here is your code working:

 // app.js (function() { 'use strict'; angular.module('app', []); })(); // main.controller.js (function() { 'use strict'; angular.module('app').controller('MainController', MainController); MainController.$inject = ['$scope']; function MainController($scope) { $scope.butLabel = "Submit"; $scope.send = send; function send() { alert("Triggered!"); } } })(); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div class="footer" ng-app="app" ng-controller="MainController as MainCtrl"> <div class="row writing"> <p>{{slogan}}</p> </div> <div class="container"> <form name="userForm" ng-submit="send()" novalidate> <div class="form-group col-md-6"> <ng-form name="userMail"> <input name="mail" type="email" ng-model="varmail" class="form-control" placeholder="Your mail" required> <!--<p class="help-block" ng-show="userMail.mail.$invalid">Valid Email Required</p>--> </ng-form> </div> <div class="form-group col-md-6"> <ng-form name="userMarket"> <input type="text" ng-model="varmarket" class="form-control" placeholder="Your favorite super-market (Franprix, Carrefour,...)" required> </ng-form> </div> <div class="form-group"> <button type="submit" class="btn btn-primary flat-butt">{{butLabel}}</button> </div> </form> </div> </div> 

Answer 2

So I find it, when I passed in the function I should have use "sendInfo()", not "sendInfo".

Thank you everyone !