AngularJs scope params undefined

Question

I have just started learning AngularJS and I am trying to make this simple app with simple inputs, controllers and a firebase database.

Problem is, the $scope params userEmail and userPassword are always undefined in Signin() when I click the button.

HTML relevant code:

<body ng-app="indexApp">
...
<div class="row" ng-controller="loginCtrl">
    <div class="hero-text-box">
        <br>
        <form>
            <p class="p2"><label for="email">email</label></p>
            <input ng-model="userEmail" id="email1" type="email"
                   name="email1" placeholder="email">
            <p class="p2"><label for="password">pasword</label></p>
            <input ng-model="userPassword" type="password" id="password"
                   name="password" placeholder="password" required>
            <a class="btn btn-full" href="#" ng-click="Signin()">הכנס</a>
        </form>

    </div>
</div>

AngularJS javascript code:

var app = angular.module("indexApp", ["firebase"]); // using firebase

app.controller("loginCtrl", function($scope, $firebaseArray) // AngularJS 
will auto add firebase 
{
var ref = firebase.database().ref().child("users")
// create a synchronized array
$scope.users = $firebaseArray(ref)

$scope.Signin = function()
{
    console.log($scope.userEmail) -- undefined!
    ....

You're probably just missing the right way to handle forms in AngularJS, try this: https://docs.angularjs.org/guide/forms — Luiz Carlos, Jul 04 '18 at 00:55
if you are trying to click without filling the input it will show you undefined.try by putting some value — Adesh Kumar, Jul 04 '18 at 04:45
This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models. See this [Youtube video](http://www.youtube.com/watch?v=ZhfUv0spHCY&feature=youtu.be&t=30m). — georgeawg, Jul 04 '18 at 12:58

score 0 · Answer 1 · answered Jul 04 '18 at 06:25

If you want to use form with angularJS, you should follow angularjs form guide:https://docs.angularjs.org/guide/forms

In your case, you need to move signin() function to html form element.I created a jsfiddle based on your code: http://jsfiddle.net/sxwei123/ADukg/25254/

Hope this would help!

score -1 · Accepted Answer · answered Jul 04 '18 at 05:56

This might help

HTML

<body ng-app="indexApp">
...
<div class="row" ng-controller="loginCtrl">
    <div class="hero-text-box">
        <br>
        <form>
            <p class="p2"><label for="email">email</label></p>
            <input ng-model="userdata.userEmail" id="email1" type="email"
                   name="email1" placeholder="email">
            <p class="p2"><label for="password">pasword</label></p>
            <input ng-model="userdata.userPassword" type="password" id="password"
                   name="password" placeholder="password" required>
            <a class="btn btn-full" href="#" ng-click="Signin(userdata)">הכנס</a>
        </form>

    </div>
</div>

Controller

var app = angular.module("indexApp", ["firebase"]); // using firebase

app.controller("loginCtrl", function($scope, $firebaseArray) // AngularJS 
will auto add firebase 
{
var ref = firebase.database().ref().child("users")
// create a synchronized array
$scope.users = $firebaseArray(ref)
$scope.userdata = {};

$scope.Signin = function(data){
 console.log(data) // you will get the object 
}

AngularJs scope params undefined

2 Answers2