AngularJs - Cannot read property '$valid' of undefined - angularjs

I've reading how to handle whether a forms is valid or invalid, and I can't figure it out why I cannot make my code work properly.
My Html form
<form name="signupForm" ng-submit="submitRegistration(signup)" ng-init="signup = {}" novalidate>
<input type="email" placeholder="Email" name="email" ng-model="signup.email"required></input>
<input type="password" placeholder="Password" name="password" ng-model="signup.password"required></input>
<button type="submit" class="button button-block button-balanced">
Registrarme!
</button>
</form>
My controller
$scope.submitRegistration = function(signupForm){
debugger;
$scope.msg = {};
if ($scope.signupForm.$valid){
//something}else{
console.log('INVALID')
}
I tried $scope.signupForm.$valid and signupForm.$valid... both I got undefined.
How can I do this in the controller side?
EDIT this is my full code (is registration form, I am using Ionic framework)
<ion-view view-title="Registrate!">
<ion-content class="padding">
<h1 class="general-title">BuenjugadorApp</h1>
<button class="button button-block facebook-button icon-left ion-social-facebook" ng-click="facebookSignup()">Registrate con Facebook</button>
<button class="button button-block button-balanced" ng-click="nosotros = true">Registrate con Nosotros</button>
<div class="error-notice" ng-if="msg.error">
<span>¡Ocurrió un error! Vuelve a intentarlo.</span>
</div>
<div class="error-notice" ng-if="msg.required">
<span>¡Todos los campos deben ser completados!</span>
</div>
<div class="error-notice" ng-if="msg.different_passwords">
<span>¡Las contraseñas ingresadas no coinciden!</span>
</div>
<div class="error-notice" ng-if="msg.too_big_password">
<span>¡Las contraseña es demasiado larga, no puede superar los 12 caracteres!.</span>
</div>
<br>
<div >
<form name="signupFormulario" ng-submit="submitRegistration(signupForm)" ng-init="signupForm = {}" novalidate>
<div class="list">
<label class="item item-input item-floating-label">
<span class="input-label">Email</span>
<input type="email" placeholder="Email" name="email" ng-model="signupForm.email"required>
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Nombre</span>
<input type="text" placeholder="Nombre" name="nombre" ng-model="signupForm.nombre"required>
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Apellido</span>
<input type="text" placeholder="Apellido" name="apellido" ng-model="signupForm.apellido"required>
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Contraseña</span>
<input type="password" placeholder="Contraseña" name="password" ng-model="signupForm.password"required>
</label>
<span class="advise">La contraseña debe ser mayor o igual a 6 caracteres.</span>
<label class="item item-input item-floating-label">
<span class="input-label">Repetir Contraseña</span>
<input type="password" placeholder="Repetir Contraseña" name="password" ng-model="signupForm.password_confirmation"required>
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Edad</span>
<input type="number" placeholder="Edad" name="edad" ng-model="signupForm.edad" min="10" max="99" required>
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Teléfono</span>
<input type="number" placeholder="Teléfono" name="telefono" max="999999999999999" ng-model="signupForm.telefono" required>
</label>
<span class="advise">Debes ingresar tu número para que los jugadores puedan contactarse mejor con vos.</span>
<label class="item item-input">
</label>
<label class="item item-input item-select">
<div class="input-label">
Tu Equipo
</div>
<select ng-model="signupForm.equipo2" ng-init="signupForm.equipo2 = {}" required>
<option ng-value="equipo" ng-repeat="equipo in equipos">{{equipo.nombre}}</option>
</select>
</label>
<label class="item item-input item-select">
<div class="input-label">
¿De qué jugás?
</div>
<select name="posicion" ng-model="signupForm.posicion" required>
<option ng-value="posicion.nombre" ng-repeat="posicion in posiciones">{{posicion.nombre}}</option>
</select>
</label>
<label class="item item-input item-select">
<div class="input-label">
¿De dónde sos?
</div>
<select name="lugar" ng-model="signupForm.provincia" ng-change="cambiovalor(signupForm.provincia)" required>
<option ng-value="prov" data-ng-repeat="(prov, ciudadesss) in complejos">{{prov}}</option>
</select>
</label>
<label class="item item-input item-select">
<div class="input-label">
¿Ciudad?
</div>
<select ng-disabled="!signupForm.provincia" ng-model="signupForm.ciudad" name="city" required>
<option ng-value="ciudad" data-ng-repeat="ciudad in ciudades">{{ciudad}}</option>
</select>
</label>
<button type="submit" class="button button-block button-balanced">
Registrarme!
</button>
<div class="centered">
<a ng-href="#/login">Ya tengo una cuenta.</a>
</div>
</div>
</form>
</div>
</ion-content>
</ion-view>

Related

Angular form validation doesn't work as expected

I have troubles understanding how it works... basically when I submit my form, it is validated without checking the required inputs nor anything else.
I've set the 'novalidate' attribute to disable the HTML5 validation, then I've set all my fields as 'required' (same for my mail input with an email validation), and I'm using 'ngMessages' from Angular to check the inputs (is that even necessary??). But I can still submit the form without any field filled in... What am I doing wrong? Could it come from the fact that I use ng-submit and not ng-click?
Any help is appreciated !
https://jsfiddle.net/WebMoutarde/n1mocvco/
<div ng-controller="MyCtrl">
<form name="form" novalidate ng-submit="vm.signup()">
<div class="list">
<label class="item item-input item-stacked-label noborder">
<span class="input-label">Nom</span>
<input type="text" name="nom" ng-model="vm.nom" required>
</label>
<hr style="border-style: solid;margin-left: 16px;margin-right: 16px;border-color: #e8e8e8;"/>
<label class="item item-input item-stacked-label noborder">
<span class="input-label">Prénom</span>
<input type="text" name="prenom" ng-model="vm.prenom" required>
</label>
<hr style="border-style: solid;margin-left: 16px;margin-right: 16px;border-color: #e8e8e8;"/>
<label class="item item-input item-stacked-label noborder">
<span class="input-label">Mail</span>
<input type="email" name="mail" ng-model="vm.mail" required>
</label>
<hr style="border-style: solid;margin-left: 16px;margin-right: 16px;border-color: #e8e8e8;"/>
<label class="item item-input item-stacked-label noborder">
<span class="input-label">Mot de passe</span>
<input type="password" name="password" ng-model="vm.password" required>
</label>
<hr style="border-style: solid;margin-left: 16px;margin-right: 16px;border-color: #e8e8e8;"/>
<label class="item item-input item-stacked-label noborder">
<span class="input-label">Confirmez votre mot de passe</span>
<input type="password" name="passwordCheck" ng-model="vm.passwordCheck" required>
</label>
<hr style="border-style: solid;margin-left: 16px;margin-right: 16px;border-color: #e8e8e8;"/>
</div>
<div ng-messages="form.$error" role="alert">
<p style="text-align: center;" ng-message="required">You must fill in all fields</p>
<p style="text-align: center;" ng-message="email">Your email address is invalid</p>
</div>
<div class="item noborder">
<button class="button button-block button-positive" type="submit" >Créer un compte</button>
</div>
</form>
</div>
I've seen many SO questions about this but I still missing something...
You could disabled form submit button till form gets into valid state by using ng-disabled directive on form button
<button class="button button-block button-positive"
type="submit"
ng-disabled="form.$invalid">
Créer un compte
</button>
Or even better would be verify form has been valid or ng-submit method and then call your signup method of controller like below.
ng-submit="form.$valid && vm.signup()"

In console error showing ignore attempt to cancel a touchend

I design on form for user registration in ionic app, run in debug mode on phone and fill form and when I'm submitting form application not responding anything else and when I'm checking it on console error is showing like
"Ignored attempt to cancel a touchend event with cancelable=false, for
example because scrolling is in progress and cannot be interrupted."
<ion-view view-title="Sign Up" class="login-main">
<ion-header-bar>
<h1 class="title">Sign Up</h1>
</ion-header-bar>
<ion-content>
<div class="row">
<div class="login-both-fields">
<div class="list">
<form class="padding" id="signup-form" ng-submit="signup(signupForm.$valid)" name="signupForm" novalidate>
<label class="item item-input">
<span class="input-label login-input-icon"><i class="ion-person"></i></span>
<input type="text" placeholder="Name*" name="m_name" ng-model="mSignupData.m_name" required>
<span ng-show="submitted && signupForm.m_name.$error.required" class="popup-validation-signup">
Please enter name
</span>
</label>
<label class="item item-input">
<span class="input-label login-input-icon"><i class="ion-person"></i></span>
<input type="text" placeholder="Surename*" name="m_surename" ng-model="mSignupData.m_surename" required>
<span ng-show="submitted && signupForm.m_surename.$error.required" class="popup-validation-signup">
Please enter surename
</span>
</label>
<label class="item item-input">
<span class="input-label login-input-icon"><i class="ion-ios-location"></i></span>
<input type="text" placeholder="Address*" name="m_address" ng-model="mSignupData.m_address" required>
<span ng-show="submitted && signupForm.m_address.$error.required" class="popup-validation-signup">Please enter address</span>
</label>
<label class="item item-input">
<span class="input-label login-input-icon"><i class="ion-calendar"></i></span>
<input type="date" placeholder="Date Of Birth*" name="m_dob" ng-model="mSignupData.m_dob" required>
<span ng-show="submitted && signupForm.m_dob.$error.required" class="popup-validation-signup">Please enter DOB</span>
</label>
<label class="item item-input">
<span class="input-label login-input-icon"><i class="ion-iphone"></i></span>
<input type="number" placeholder="Mobile Number" name="m_mobno" ng-model="mSignupData.m_mobno" required>
<span ng-show="submitted && signupForm.m_mobno.$error.required" class="popup-validation-signup">Please enter mobile no</span>
</label>
<label class="item item-input">
<span class="input-label login-input-icon"><i class="ion-ios-email"></i></span>
<input type="email" placeholder="Email*" name="m_email" ng-model="mSignupData.m_email" required>
<span ng-show="submitted && signupForm.m_email.$error.required" class="popup-validation-signup">Please enter emailid</span>
<span ng-show="submitted && signupForm.m_email.$error.email" class="popup-validation-signup">Please enter valid emailid</span>
</label>
<label class="item item-input">
<span class="input-label login-input-icon"><i class="ion-person"></i></span>
<input type="text" placeholder="User Name*" name="m_username" ng-model="mSignupData.m_username" required>
<span ng-show="submitted && signupForm.m_username.$error.required" class="popup-validation-signup">Please enter username</span>
</label>
<label class="item item-input">
<span class="input-label login-input-icon"><i class="ion-locked"></i></span>
<input type="password" placeholder="Password*" name="m_pwd" ng-model="mSignupData.m_pwd" ng-minlength="8" required>
<span ng-show="submitted && signupForm.m_pwd.$error.required" class="popup-validation-signup">Please enter password</span>
<span ng-show="submitted && loginForm.m_pwd.$error.minlength" class="validation-login popup-forvalidation correct-password-login-error">Password should be min 8 character.</span>
</label>
<div class="term-line-signup">
<input id="terms" type="checkbox" name="vehicle" value="Bike" ng-model="mSignupData.vehicle" required> <label for="terms" class="lable-readinfo">By Accept</label> terms& conditions.
<span ng-show="submitted && signupForm.vehicle.$error.required" class="popup-validation-signup please-confirm-condtion">Please accept terms&condition</span>
</div>
<button type="submit" ng-click="submitted = true" class="button button-block button-positive button-energized client-btn">Register</button>
<a class="button button-block button-positive Normal-btn" href="#/mLogin">Signin</a>
</form>
</div>
</div>
</div>
</ion-content>
</ion-view>
You can try return true from touchend and everything will work fine.
Do like this :
var scroll=false;
//while moving
$("body").on("touchmove", function(){
scroll = true;
});
//at the end of touch
$("body").on("touchend", function(){
if (scroll)
return;
// wasn't a drag, just a tap
// more code here
});
//when touch starts
$("body").on("touchstart", function(){
scroll = false;
});

write to json file possible?

I have a html file as follows to enter details of user, when i press submit it should go to a file created my myself(myfile.json)which is empty now.
please provide code for that.
<ion-view view-title="employee">
<ion-content>
<!-- <input type="date" id=FromDate" name="FromDate" ng-model="FromDate" date-format="yyyy-MM-dd"/> -->
<form name="formname" ng-submit="logdata(formname)">
<h1 >{{data.FromDate|date}}</h1>
<label class="item item-input ">
<div class="input-label">date:</div>
<input type="date" name="name" value="" ng-model="data.FromDate"></input>
</label>
<div class="list">
</div>
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Project
</div>
<select ng-options="project.name as project.name for project in projects" ng-model="data.selectedProject">
<!-- <option>createwhimsy</option>
<option selected>activity tracker</option>
<option>big iron</option> -->
</select>
</label>
</div>
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Manager
</div>
<select ng-model="data.manager">
<option selected>deepa</option>
</select>
</label>
</div>
<label class="item item-input item-stacked-label">
<span class="input-label">task</span>
<textarea placeholder="task details goes here" rows="8" cols="10" ng-model="data.task"></textarea>
</label>
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Estimated time(hrs)
</div>
<select ng-model="data.time">
<option selected>1</option>
<option selected>2</option>
<option selected>3</option>
<option selected>4</option>
<option selected>5</option>
<option selected>6</option>
</select>
</label>
</div>
<button type="submit" class="button button-calm">
submit
</button>
</form>
</ion-content>
</ion-view>
possible, need simple code, in controller.with pure angularjs.

Form validation error when using ion-scroll tag

I'm creating an Ionic app and I'm having some issues with form validation when I use < ion-scroll> tag. This is my form:
<form ng-show="!success" name="form" role="form" novalidate ng-submit="register()" show-validation>
<div class="list list-inset">
<label class="item item-input">
<input type="text" class="form-control" name="firstName" placeholder="Nome"
ng-model="registerAccount.firstName" ng-minlength=1 ng-maxlength=50 required maxlength="50">
</label>
<div ng-show="form.firstName.$dirty && form.firstName.$invalid" class="padding-top padding-left assertive">
<p class="help-block"
ng-show="form.firstName.$error.required">
some message
</p>
</div>
.
.
.
<label class="item item-input">
<input type="password" class="form-control" name="password" placeholder="Senha"
ng-model="registerAccount.password" ng-minlength=5 ng-maxlength=50 required>
</label>
<div ng-show="form.password.$dirty && form.password.$invalid" class="padding-top padding-left assertive">
<p class="help-block"
ng-show="form.password.$error.required">
some message
</p>
</div>
<label class="item item-input">
<input type="password" class="form-control" name="confirmPassword" placeholder="Repita a senha"
ng-model="confirmPassword" ng-minlength=5 ng-maxlength=50 required>
</label>
<div ng-show="form.confirmPassword.$dirty && form.confirmPassword.$invalid" class="padding-top padding-left assertive">
<p class="help-block"
ng-show="form.confirmPassword.$error.required">
some message
</p>
<p class="help-block"
ng-show="form.confirmPassword.$error.minlength">
Sua confirmação de senha precisa ter no mínimo 5 caracteres.
</p>
<p class="help-block"
ng-show="form.confirmPassword.$error.maxlength">
Sua confirmação de senha deve ser menor que 50 caracteres.
</p>
</div>
</div>
<div class="form-button">
<button type="submit" class="button button-block button-balanced">Criar conta</button>
</small>
</div>
</form>
This form is working correctly when there is no Ionic's tag, however, when I add a ion-scroll tag, either inside or outside form tag, the validation fails saying that password and confirm password are different. Should I use a specific Ionic tag with form? Which could be the tag I should use?
The problem is because some ionic's components uses child scope, this kind of scope "creates an 'isolate' scope that does not prototypically inherit."
I solved my problem using the recommended best practice of use "." (dot) in my models. So I changed:
<input type="password" ng-model="confirmPassword" required>
to
<input type="password" ng-model="something.confirmPassword" required>

angular isn't respecting all my required fields

In my page below everything is working except for the user.productNumber input at the bottom. What I mean is that all the "required" fields are keeping the "Create Account" button disabled but it's like the productNumber input is being ignored. How can I get this working?
<ion-view title="Sign Up">
<ion-content>
<form name="signUpForm">
<div class="list">
<label class="item item-input item-stacked-label">
<input data-ng-model="user.email" data-ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" type="email" placeholder="user#mail.net" required>
</label>
<label class="item item-input item-stacked-label">
<input data-ng-model="user.password" type="password" placeholder="password" required>
</label>
<label class="item item-input item-stacked-label">
<input data-ng-model="user.passwordAgain" type="password" placeholder="password (again)" required>
</label>
<li class="item item-checkbox">
<label class="checkbox">
<input data-ng-model="user.newsletter" type="checkbox" checked>
</label>
Weekly Newsletter
</li>
<label class="item item-input item-stacked-label">
<input data-ng-modal="user.productNumber" data-ng-pattern="/^[a-zA-Z0-9-]{8}$/" type="text" placeholder="Product Number" required>
</label>
<button data-ng-click="createAccountClick()" data-ng-disabled="signUpForm.$invalid" class="button button-full button-positive">
Create Account
</button>
</div>
</form>
</ion-content>
</ion-view>
This is because you mispelled data-ng-model with data-ng-modal.
Simply change:
data-ng-modal="user.productNumber"
with
data-ng-model="user.productNumber"

Resources