Stuck for 5 hours: Cannot read property $valid of undefined..(login form does not submit data)

@shotbyabel wrote:

I have used this code in 2 other AngularJs projects and THEY WORK! The onSubmit function sends data to wherever I direct it to. In this case a simple console log or an alert. As simple as this sounds I have no clue why I can't pull this off with this ionic form. I hope someone here can help.. Here's the issue in depth..

I have an ionic sidemenu app that I created via ionic start. I have been modifying it to fit my app and I am running into the following issue despite reading over similar errors all over stac overflow and google.

TypeError: Cannot read property '$valid' of undefined
at Scope.$scope.onSubmit

I can't seem to get it fix since the fixes suggested don't seem to pertain to my problem. I have a suspicion that since my login3.html view is inside this kinda of .state syntax it possibly could not be passing the functions but then again that makes no sense?..

app.js

  .state('app.login3', {
      url: '/login3',
      views: {
        'menuContent': {
          templateUrl: 'templates/login3.html',
          controller: 'LoginCtrl'
        }
      }
    })

The login.html below is the one that came with the scaffold ionic app and this one's onSubmit function DOES WORK.

    .state('login', {
    url: '/login',
    templateUrl: 'templates/login.html',
    controller: 'LoginCtrl'
  
  })

Now.. The functions inside their controllers are completely different however I have used my own login functions and controller logic in other angular apps and I have no issue submitting data with them on my onSubmit functions.

I have thoroughly examined my code from my working login forms and it's identical to the one I am using on this ionic login form. I was hoping someone could please take a peek at it and see if there's something I am missing or perhaps it's different under ionic?

The Login Form 'in question' login3.thml

<ion-view class="login-bg" view-title="Login3" name="login3-view">
  <ion-content class="padding">
    <form class="login-form" id="loginForm" ng-submit="theLoginForm.$valid && loginForm.onSubmit(loginForm)" novalidate="novalidate" name="theLoginForm">
  
        <div class="list input-fields"
          ng-class="{ 'has-error' : theLoginForm.username.$touched && theLoginForm.username.$invalid, 'has-success': theLoginForm.username.$touched && theLoginForm.username.$valid}">
            <label for="username" class="item item-input" id="signIn-psw-inputs">
            <input 
            type="text" 
            ng-model="loginForm.Username"
            class="input-color signIn-input" 
            placeholder="Username" 
            required="required"></label>
         <p ng-show="theLoginForm.username.$invalid && !theLoginForm.username.$pristine"
            class="help-block">Username is Required!.></p>
        </div>        

        <div
          ng-class="{ 'has-error' : theLoginForm.password.$touched && theLoginForm.password.$invalid, 'has-success': theLoginForm.password.$touched && theLoginForm.password.$valid}">          
          <label for="password" class="item item-input" id="signIn-psw-inputs">
          <input  
          type="password"
          class="input-color"
          ng-model="loginForm.Password" 
          placeholder="Password"></label>
       <p ng-show="theLoginForm.password.$invalid && !theLoginForm.password.$pristine"
          class="help-block">Your Password is required!.</p><!--bootstrap form validation classes--> 
     
      </div>
      <!--LOGIN button-->
        <a href="#" class="button button-block button-positive" id="sign-in-btn" ng-click="onSubmit()">login</a>

    </form>    
  </ion-content>
</ion-view>

Here's the LoginController code for this form submission

// IIFE START //
(function() { 
 'use strict';

  angular.module('starter')
    .controller('LoginCtrl', function ($scope, $http) {
    $scope.loginForm ={}
    $scope.onSubmit = function () {
      if ($scope.theLoginForm.$valid) {
      alert("Login Is Valid");

      console.log("user will be logged into the command post")
      console.log($scope.loginForm);
      
      } else {
        
        alert("INVALID LOGIN");
      
      }
    
    };

  });

// IIFE START //
})();

Here's my app.js with the .states code

///LOGIN TEST 3 is the one in question..

angular.module('starter', ['ionic', 'starter.controllers'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

    .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })

    .state('login', {
    url: '/login',
    templateUrl: 'templates/login.html',
    controller: 'LoginCtrl'
  
  })
//////LOGIN 3 TEST ////////
  .state('app.login3', {
      url: '/login3',
      views: {
        'menuContent': {
          templateUrl: 'templates/login3.html',
          controller: 'LoginCtrl'
        }
      }
    });

The error...

Thank you in advance..

Posts: 4

Participants: 3

Read full topic