getting data back to controller from form

Question

I have this form below. When I change the text fields, it shows the changes here

<div>
    {{authform.email}}{{authform.password}}
</div>

but when I try to submit the form by ng-click="signup()" on a button, it doesn't send me the value of text fields. below is my code

<div class="col-md-12" ng-controller="authCtrl">


        <div class="row">
            <div class="col-md-14">
                <div class="jumbotron">

                    <form>
                        <div class="createUserDiv"><input type="text" name="email" placeholder="enter your email address" ng-model="authform.email"/></div>
                        <div class="createUserDiv"><input type="text" name="password" placeholder="enter your password" ng-model="authform.password"/></div>
                        <div class="createUserDiv"><input type="text" name="confirmpassword" placeholder="confirm your password" ng-model="authform.confirmpassword"/></div>

                        <p><a class="btn btn-lg btn-success" ng-click="signup()">Splendid!<span
                                class="glyphicon glyphicon-ok"></span></a></p>
                    </form>
                    <div>
                        {{authform.email}} {{authform.password}}
                    </div>
                </div>

            </div>
        </div>

</div>

here is my js

angular.module('myAPP')
    .controller('authCtrl', function ($scope, $http, $location) {


        $scope.signup = function() {

            $scope.authform = {};
            $scope.authform.email = "";
            $scope.authform.password  = "";
            $scope.authform.confirmpassword  = "";

            var data = {
                "dataBlob": {
                    "email": $scope.authform.email,
                    "password":  $scope.authform.confirmpassword

                }
            };

      console.log($scope.authform.email); 
    });

my console.log is coming up empty ...null....I am not sure why is it not binding the fields to data. I am pretty new to angular so I am still trying to figure out these things.

Answer 1

Stat your controller like this:

angular.module('myAPP')
.controller('authCtrl', function ($scope, $http, $location) {
    $scope.authForm = {};

Then change your signup method to do this:

$scope.signup = function() {
    console.log($scope.authForm);
}

Your values are already bound, but when you called $scope.authForm = {}; inside of signup, you are overwriting all of your values.

Also instead of ng-click="signup()" on your button, do this:

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

Which will allow you to implement validations and submit on [enter] keypress when the user in an input field

For an example, see this fiddle