I have a form in Ionic and I am trying to return the value of the textbox, but am having issues. The rest of the form is loading and 'signup' is returned to the console. formData.email isn't bound in the template and neither is anything returned to the console when I type something in and click the button.

Any advice on what to do?

signup.html

<!-- Header -->
<div class="bar bar-header bar-light">

  <button class="button icon-left ion-chevron-left button-clear button-dark">Back</button>

  <h1 class="title">Signup</h1>
</div>

<!-- Space between header and signup form -->
<div class="spacer" style="width: 300px; height: 50px;"></div>


<div class="list list-inset">

    <!-- Signup form text fields -->
    <form>

        <label class="item item-input">
            <span class="input-label">Email</span>
            <input type="email" ng-model="formData.email">
        </label>



        <label class="item item-input">
        <span class="input-label">Username</span>
        <input type="text">
        </label>

        <label class="item item-input">
        <span class="input-label">Password</span>
        <input type="password">
        </label>

        <!-- Submit button for signup form -->
        <button on-touch="onTouch()" class="button button-positive button-block">
            Sign up
        </button>

    </form>
</div>

{{formData.email}}

controllers.js

.controller('SignupCtrl', function($scope, $ionicLoading, $state, $stateParams){
    console.log('signup');

    $scope.formData = {};

    //Go to the guessing page
    $scope.onTouch = function(item,event){
        console.log($scope.formData.email);
    };



});

I have a form in Ionic and I am trying to return the value of the textbox, but am having issues. The rest of the form is loading and 'signup' is returned to the console. formData.email isn't bound in the template and neither is anything returned to the console when I type something in and click the button.

Any advice on what to do?

signup.html

<!-- Header -->
<div class="bar bar-header bar-light">

  <button class="button icon-left ion-chevron-left button-clear button-dark">Back</button>

  <h1 class="title">Signup</h1>
</div>

<!-- Space between header and signup form -->
<div class="spacer" style="width: 300px; height: 50px;"></div>


<div class="list list-inset">

    <!-- Signup form text fields -->
    <form>

        <label class="item item-input">
            <span class="input-label">Email</span>
            <input type="email" ng-model="formData.email">
        </label>



        <label class="item item-input">
        <span class="input-label">Username</span>
        <input type="text">
        </label>

        <label class="item item-input">
        <span class="input-label">Password</span>
        <input type="password">
        </label>

        <!-- Submit button for signup form -->
        <button on-touch="onTouch()" class="button button-positive button-block">
            Sign up
        </button>

    </form>
</div>

{{formData.email}}

controllers.js

.controller('SignupCtrl', function($scope, $ionicLoading, $state, $stateParams){
    console.log('signup');

    $scope.formData = {};

    //Go to the guessing page
    $scope.onTouch = function(item,event){
        console.log($scope.formData.email);
    };



});

• javascript
• angularjs
• ionic-framework

1 Answer 1

What you're doing is correct, the only thing that I could do to recreate this was if you haven't entered a valid email address it returns undefined. This is a validation feature built in to Angular itself and has nothing to do with Ionic. You can find out more about this here: https://docs.angularjs/api/ng/input/input%5Bemail%5D