ngSubmit is not triggering function in controller

Question

I am relatively very new to AngularJS and javascript Please be merciful while answering.

I am trying to create one sample application where I want to nest controllers. MainController which will always be there acting as parent container which will render menu and user name on top if user is logged in. For now I am checking if user is stored in localStorage.

Each page will have its own controller which will do page specific things.

I am stuck at ng-submit and why its not working?

Any help is appreciated.

Index.html

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-resource.js"></script>
    <script src="angularapp.js"></script>
</head>
<body ng-app="myAngularApp">
    <div ng-controller="MainController">
    <div ng-show="isLoggedIn">Menu</div>
        <div ng-view>
        </div>
    </div>
</body>

login.html

  <from ng-submit="login()">
    <input type="text" id="username" ng-model="username"></input>
    <input type="password" id="password" ng-model="password"></input>
    <input type="submit" value="submit" id="submit" ng-submit="login()"></input>
</form>

angularapp.js

angular.module('myAngularApp',['ngRoute','ngResource'])
.config(['$routeProvider',function($routeProvider){

    $routeProvider.when('/home',{
        controller:'SubController',
        templateUrl:'templates/home.html'
    })
    .when('/login',{
        controller:'MainController',
        templateUrl:'templates/login.html'
    });
}])
.controller('MainController',['$scope','$window','userService',function($scope,$window,userService){
    $scope.isLoggendIn=userService.isLoggedIn;
    console.log('here I come');
    $scope.username='';
    $scope.password='';
    $scope.login=function(){
        alert('Ignored???');
        $window.localStorage['myUser']={username:$scope.username,password:$scope.password};
        consoel.log('user is logged in now');
    };
}])
.controller('SubController',['$scope',function($scope){
    $scope.myContent='Contenst to show after logged in';
}])
.service('userService',['$window',function($window){
    var self=this;  
    self.isLoggedIn=function(){
        if($window.localStorage['myUser'])
            return true;
        else 
            return false;
    };
}]);

You have different functions there ng-submit="submit()" , ng-submit="login()" — Elvin Valiev, Nov 25 '15 at 12:41
Thanks u @ElvinValiev I tried changing submit to login. still not working. all the places in login.html and angularapp.js also. — Abhinav Suryawanshi, Nov 25 '15 at 12:44
Take a look at my answer, you also have to change ng-submit to ng-click in your submit input. — Elvin Valiev, Nov 25 '15 at 12:45
Please check my answer.Surely you will get your error resolved.Thanks — Dilip Oganiya, Nov 25 '15 at 12:47

score 3 · Accepted Answer · edited Nov 25 '15 at 13:30

3

Please change your code. Seems you have made spelling mistake.

<from ng-submit="submit()">

to:

<form ng-submit="submit()">

Also replace the following code.

<input type="submit" value="submit" id="submit" ng-click="submit()"></input>

edited Nov 25 '15 at 13:30

Ankh

5,478
3
36
40

answered Nov 25 '15 at 12:43

Dilip Oganiya

1,504
12
20

2

That's not the only typo in the code, OP should be more careful and it's scary only you noticed that ;) – maurycy Nov 25 '15 at 12:45
@DilipN thanks a lot....!!! May be u really need outsiders view to get things right. wasted 4 hours on this :( do u suggest any tool to increase productivity in html & angular? – Abhinav Suryawanshi Nov 25 '15 at 13:46
I use 2 different editors, paid WebStorm from JetBrains and Atom from Git, both have live validation of code and good support of angular – maurycy Nov 25 '15 at 14:30
1

BTW you don't need the `ng-click` on input as the submit would trigger `ng-submit` anyway – maurycy Nov 25 '15 at 14:32
It's been over 3 yrs, can you believe the " – Jenna Leaf Jan 31 '19 at 18:23

you_c · Answer 2 · 2015-11-25T12:47:45.303

1

No need of ng-submit="login()" in this place type="submit is enought and last one is button not input

<from ng-submit="submit()">
    <input type="text" id="username" ng-model="username"></input>
    <input type="password" id="password" ng-model="password"></input>
    <button type="submit" value="submit" id="submit"></button>
</form>

edited Nov 25 '15 at 12:47

answered Nov 25 '15 at 12:45

you_c

109
4

This is not an answer, it's a comment to functionality – maurycy Nov 25 '15 at 12:46
sorry @maurycy I don't have privilege to comment out. – you_c Nov 25 '15 at 12:55

score 0 · Answer 3 · answered Nov 25 '15 at 12:42

0

Edit your code:

<input type="submit" value="submit" id="submit" ng-submit="login()"></input>

Must be as below:

<input type="submit" value="submit" id="submit" ng-click="submit()"></input>

answered Nov 25 '15 at 12:42

Elvin Valiev

454
6
15

`ng-submit` shouldn't even be there, the `input#type:submit` should trigger the `ng-submit` on form – maurycy Nov 25 '15 at 12:47

krish · Answer 4 · 2023-06-07T11:23:58.363

0

I think there is a problem in your login.html. remove login() because you have submit()

<form ng-submit="submit()">
    <input type="text" id="username" ng-model="username"></input>
    <input type="password" id="password" ng-model="password"></input>
    <input type="submit" value="submit" id="submit"></input>
</form>

edited Jun 07 '23 at 11:23

answered Nov 25 '15 at 12:43

krish

537
2
14

It's been over 3 yrs, – Jenna Leaf Jan 31 '19 at 18:09

ngSubmit is not triggering function in controller

4 Answers4