...">

Ionic - not receiving form data when clicking the header button

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 the form data when I click the createCompanyUser(signup) button. but I get the value undefined. Please help me. Thanks.

+5
source share
1 answer

it seems that the scope of the ion-content directive was determined by signup , and with the ion-view link it got undefined (2 different signup links).

You can solve this by specifying signup in the management area. this will cause ion-content and ion-view to use the same signup link

 .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 Controller as syntax

+2
source

All Articles