How to get data from form input

Question

Im new to mobile development, especially using Ionic. Please help me out

I have this code for my route

.state('auth', {
url: '/auth',
templateUrl: 'templates/login.html',
controller: 'AuthCtrl'

I have this code for my login.html

<ion-view view-title="Login" name="login-view">
<ion-content class="padding">
    <div class="list list-inset">
        <label class="item item-input">
            <input type="text" placeholder="Mobile Number" ng-model="mobile_number">
        </label>
        <label class="item item-input">
            <input type="password" placeholder="Password" ng-model="password">
        </label>
    </div>
    <button class="button button-block button-calm" ng-click="login()">Login</button>
</ion-content>

and for my AuthCtrl

.controller('AuthCtrl', function($scope,$auth,$state) {

$scope.login = function() {
    var credentials = {
        mobile_number : $scope.mobile_number,
        password : $scope.password,
    }
    console.log(credentials);
    $auth.login(credentials).then(function(data) {
        // If login is successful, redirect to the users state
        $state.go('tab.dash', {});
    });
}

})

I always get this Object {mobile_number: undefined, password: undefined} when calling console.log(credentials) I always put values in my forms, but its always undefined. Why?

Answer 1

First initialize your scope credentials model:

$scope.credentials = {
   'mobile_number' : ''
   'password' : '',
 }

Then bind your inputs to the scope properties:

<input type="text" placeholder="Mobile Number" ng-model="credentials.mobile_number">


<input type="password" placeholder="Password" ng-model="credentials.password">

And make use of $scope.credentials that now has your form data:

$auth.login($scope.credentials).then(function(data) {
    // If login is successful, redirect to the users state
    $state.go('tab.dash', {});
});

Answer 2

Your credentials object is not bound to scope. It looks like You need to declare $scope.credentials outside of login. Also on the input, ngModel should bind to credentials.password and credentials.mobile_number.