AngularJS error: TypeError: v2.login is not a function

Question

I would like to call the login function when I click the login button but keep getting the error message in the title. Can someone point out the error in my script?

Answer 1

To be callable from the view, a function must be in the $scope. Add

$scope.login = login;

to the JS code of the controller.

You also need to actually use that controller. Change

<div class="container" style="max-width: 300px">

to

<div ng-controller="AuthCtrl" class="container" style="max-width: 300px">

This is all fundamental stuff. My advice would be to learn from an AngularJS tutorial before going further.

Answer 2

It may be a late answer by me. But It working for me

Check form name you set e.g. ng-form="login"

and function name e.g. ng-click="login()"

Then it will not work . You have to change one of them. e.g. ng-form="loginForm"

Answer 3

In AngularJS call the function from view it must be in the $scope.

JS

// exposes login function in scope
$scope.login = login;

HTML

<div class="container" ng-controller="AuthCtrl" style="max-width: 300px"> <!-- I notice here for include ng-controller to your main div -->
<form class="form-signin">       
  <h2 class="form-signin-heading" style="text-align: center">Please Sign In</h2>
  <input type="text" class="form-control" name="username" ng-model = "username" placeholder="Email Address" required="" autofocus="" />
    </br>
  <input type="password" class="form-control" name="password" ng-model = "password" placeholder="Password" required=""/>
    </br>
  <button class="btn btn-lg btn-primary btn-block" type="submit" ng-click="login()">Login</button>   
</form>

Answer 4

Two enable two-way binding you have to assign your login function to $scope. Replace your code for function with this:

$scope.login=function() {
        ref.authWithPassword({
            email    : "nick.koulias@gmail.com",
            password : "Jaeger01"
        }, function (error, authData) {
            if (error) {
                console.log("Login Failed!", error);
            } else {
                console.log("Authenticated successfully with payload:", authData);
            }
        });
    }

Answer 5

In my case, I was having an exact same issue as yours. However, coming across gkalpak's answer to such a scenario helped me out.

Turned out to be what I was calling was addBuddy() function, from a form named "addBuddy". The solution was to change the name of either of the two things to make one stand out or differentiable from the other. I changed the name of the form to "addBuddyForm" and voila! My function worked!

Here's a snippet of my case:

<form name="addBuddy" class="form-horizontal" novalidate>
...
<button class="btn btn-sm btn-info" ng-click="addBuddy()>Submit</button>

Which, I changed to:

<form name="addBuddyForm" class="form-horizontal" novalidate>
...
<button class="btn btn-sm btn-info" ng-click="addBuddy()>Submit</button>

...and it worked! :)

Answer 6

Explanation:

AngularJS 1.x registers any form DOM element that has a name property in $scope via formDirectiveFactory. This directive automatically instantiates form.FormController if the above is true:

If the name attribute is specified, the form controller is published onto the current scope under

from: angular.js:24855

Hence if you have a <form name=myForm> it will override your $scope.myForm = function() { ... }