Ionic- not getting data of form on click of header button

Question

This is my code :

<ion-view view-title="Register">
    <ion-nav-buttons side="right">
        <button class="button button-icon button-clear ion-android-done" ng-click="createCompanyUser(signup)" ng-hide="signupForm.signupMobile.$error.maxlength || signupForm.signupMobile.$error.minlength || signupForm.signupFirstName.$error.required || signupForm.signupLastName.$error.required || signupForm.signupEmail.$error.required || signupForm.signupEmail.$error.email || signupForm.signupPwd.$error.required || signupForm.signupMobile.$error.required || signupForm.confirmpwd.$error.required">
        </button>
    </ion-nav-buttons>
    <ion-content class="" has-header>
        <form name="signupForm" novalidate>
            <ion-item class="item item-thumbnail-left">
                <img id="signupImage" src="" style="padding: 2px;border: 1px solid; height: 100px;width: 100px;">
                <h2>Select Company Logo</h2>
                <br>
                <input type="file" id="i_fileSignup" value="" accept="image/*">                
            </ion-item>
            <div class="list list-inset">

                <label class="item item-input item-floating-label">
                    <span class="input-label">First Name</span>
                    <input type="text" placeholder="First Name" name="signupFirstName" ng-model="signup.signupFirstName" required>
                </label>
                <span style="color:red" ng-show="signupForm.signupFirstName.$dirty">
                    <span ng-show="signupForm.signupFirstName.$error.required">First name field is required.</span>
                </span> 

                <label class="item item-input item-floating-label">
                    <span class="input-label">Last Name</span>
                    <input type="text" placeholder="Last Name" name="signupLastName" ng-model="signup.signupLastName" required>
                </label>
                <span style="color:red" ng-show="signupForm.signupLastName.$dirty">
                    <span ng-show="signupForm.signupLastName.$error.required">Last name field is required.</span>
                </span> 

                <label class="item item-input item-floating-label">
                    <span class="input-label">Email</span>
                    <input type="email" placeholder="Email" name="signupEmail" ng-model="signup.signupEmail" required>
                </label>
                <span style="color:red" ng-show="signupForm.signupEmail.$dirty && signupForm.signupEmail.$invalid">
                    <span ng-show="signupForm.signupEmail.$error.required">Email is required.</span>
                    <span ng-show="signupForm.signupEmail.$error.email">Invalid email address.</span>
                </span>

                <label class="item item-input item-floating-label">
                    <span class="input-label">Mobile</span>
                    <input type="tel" placeholder="Mobile" name="signupMobile" id="mobile" ng-keypress="fnMobile()" ng-minlength="10" ng-maxlength="10" ng-model="signup.signupMobile" required>
                </label>
                <span style="color:red" ng-show="signupForm.signupMobile.$dirty">
                    <span ng-show="signupForm.signupMobile.$error.required">Mobile field is required.</span>
                    <span ng-show="signupForm.signupMobile.$error.minlength">Mobile number should be at least 10 digit.</span>
                    <span ng-show="signupForm.signupMobile.$error.maxlength">Mobile number can not be at more than 10 digit.</span>
                </span> 

                <label class="item item-input item-floating-label">
                    <span class="input-label">Password</span>
                    <input type="password" placeholder="Password" name="signupPwd" ng-model="signup.signupPwd" required>
                </label>
                <span style="color:red" ng-show="signupForm.signupPwd.$dirty">
                    <span ng-show="signupForm.signupPwd.$error.required">Password field is required.</span>
                </span>

                <label class="item item-input item-floating-label">
                    <span class="input-label">Confirm Password</span>
                    <input type="password" placeholder="Confirm Password" name="confirmpwd" ng-model="signup.confirmpwd" ng-match="signupPwd" required>
                </label>   
                <span style="color:red" ng-show="signupForm.confirmpwd.$dirty">
                    <span ng-show="signupForm.confirmpwd.$error.match">Emails have to match!</span>
                    <span ng-show="signupForm.confirmpwd.$error.required">Confirm Password is required.</span>
                </span>

                <a class="button button-clear button-positive" href="#/app/login">I am already registered.</a>
                <br>
            </div>
        </form>
    </ion-content>
</ion-view>

js code :

angular.module('serviceprovider.signup', [])

        .controller('signupCtrl', function ($scope, $location, $http) {

            $scope.createCompanyUser = function (val)
            {
                alert(JSON.stringify(val));
            };

        });

menu.html:

<ion-side-menus enable-menu-with-back-views="true" ng-click="fnMenu()">
    <ion-side-menu-content drag-content="false">
        <ion-nav-bar class="bar-stable bar-royal">
            <ion-nav-back-button class="button-icon ion-arrow-left-c">
            </ion-nav-back-button>

            <ion-nav-buttons side="right">
                <button class="button button-icon button-clear ion-navicon" ng-click="toggleRight()">
                </button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content>

    <ion-side-menu side="right">
        <ion-content>
            <ion-list>

                <div class="mymenu">

                    <ion-item menu-close href="#/app/userDashboard">
                        <i class="fa fa-tachometer"></i> Dashboard
                    </ion-item>
                    <ion-item menu-close href="#/app/userMyProfile">
                        <i class="fa fa-user"></i> My Profile
                    </ion-item>
                    <ion-item menu-close href="#/app/changePwd">
                        <i class="fa fa-key"></i> Change Password
                    </ion-item>
                    <ion-item menu-close href="#/app/listProduct/0">
                        <i class="fa fa-tags"></i> Products
                    </ion-item>
                    <ion-item menu-close href="#/app/listCart">
                        <i class="fa fa-shopping-cart"></i> Cart
                    </ion-item>
                    <ion-item menu-close href="#/app/listQuotation" ng-show="userquotation">
                        <i class="fa fa-file-text-o"></i> Quotation
                    </ion-item>
                    <ion-item menu-close href="#/app/listOrder" ng-show="userorder">
                        <i class="fa fa-clipboard"></i> Order
                    </ion-item>
                </div>

                <div class="config">
                    <ion-item menu-close ng-click="signout()">
                        <i class="fa fa-sign-out"></i> Sign out
                    </ion-item>
                </div>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

I want to get form data on click of createCompanyUser(signup) function. but i get undefined value. Please help me. Thanks.

Jossef Harush Kadouri · Accepted Answer · 2015-05-22 06:27:57Z

2

it seems that signup was defined the scope of ion-content directive and when referenced by ion-view it got undefined (2 different signup references) .

You can solve it by defining signup on the controller scope. it will cause the ion-content and ion-view to use the same signup reference

.controller('signupCtrl', function($scope) {

  $scope.signup = {};

  $scope.createCompanyUser = function (val)
  {

    alert(JSON.stringify(val));
  };

});

http://codepen.io/anon/pen/YXGLzp

While this is a hack,

check out the Controller as syntax

edited May 22, 2015 at 6:27

answered May 22, 2015 at 6:18

Jossef Harush Kadouri

34.5k10 gold badges143 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Ionic- not getting data of form on click of header button

1 Answer 1

http://codepen.io/anon/pen/YXGLzp

While this is a hack,

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

While this is a hack,

Comments

Related