::::UPDATE:::::
To those who have been kind enough to suggest things. Thanks!
I was able to do just a quick fix that allows me to submit data into the form and gets rid of that Cannot read property '$valid' of undefined BUT now anyone can login simply by pushing the login button… Here’s the QUICK fix to get rid of that error.
BEFORE (did not work)
if ($scope.theLoginForm.$valid) {
alert(“Login Is Valid”);
AFTER (quick fix, but there’s not INVALID condition that kicks in)
if (true) {
THE PROBLEM
have used this code in 2 other AngularJs projects and IT WORKS! 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…
I think is an issue with scope but I can’t find it. I hope this info helps. thanks again…
