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"
Related
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>
i am trying to create a login application with create account option.When i run the ionic serve i get a white screen.
Heres code i have done so far
(am totally new to this stuff )
index.html
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
login.html
<ion-view>
<ion-content>
<div class="login-image">
<img src="../img/img3.jpg" width="100%" class="padding">
</div>
<div class="padding">
<form ng-submit="doLogin()" >
<div class="list">
<label class="item item-input">
<span class="input-label"></span>
<input type="text" ng-model="loginData.username" placeholder="Username">
</label><br>
<label class="item item-input">
<span class="input-label"></span>
<input type="password" ng-model="loginData.password" placeholder="Password">
</label><br>
<div style=" text-align: right;">
Forgot Password
</div><br>
<label>
<button class="button button-block button-positive" type="submit" href = "template/dashboard.html">Log in</button>
</label>
<br>
<div style=" text-align: center;">
Create Account
</div>
</div>
</form>
</div>
</ion-content>
</ion-view>
createaccount.html
<ion-view>
<ion-content>
<div>
<form name="createaccountform" class="padding">
<div>
<label class="item item-input item-floating-label">
<span class="input-label">First Name</span>
<input type="text" name="firstname" placeholder="First Name">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Last Name</span>
<input type="text" name="lastname" placeholder="Last Name">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Email</span>
<input type="email" name="email" placeholder="Email">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Username</span>
<input type="text" name="Username" placeholder="Username">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Password</span>
<input type="password" name="password" placeholder="Password">
</label>
<label>
<button class="button button-block button-positive" type="submit" href="template/login.html">Create Account </button>
</label>
</div>
</form>
</div>
</ion-content>
</ion-view>
app.js
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state('index',{
url: '/index',
abstract: true,
templateUrl: '/index.html'
})
.state('login',{
url: '/login',
templateUrl: 'templates/login.html'
})
.state('createaccount',{
url: '/createaccount',
templateUrl: 'templates/createaccount.html'
});
//allows for fallback when page not found or not exist
$urlRouterProvider.otherwise('templates/login.html');
});
Dont know what am dong wrong but i really need a guide on this.
After of run your command, need to access to the following URL to see your login page:
http://localhost:8000/login
The routing is handled in your app.js file throughout state manager.
I suggest taking at look at the official documentation to understand how works.
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()"
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;
});
In this code:
<div class="list">
<label class="item item-input">
<span class="input-label">CEP Origem: </span>
<input type="text" id="origem" ng-model="cep" ui-br-cep-mask>
</label>
<label class="item item-input">
<span class="input-label">CEP Destino: </span>
<input type="text" id="destino" ng-model="cep" ui-br-cep-mask>
</label>
</div>
When I completed any one of the two the other have the same value, how can I change this?
Because both have the same model, provide different model for each input will solve this issue. You can also use object and bind the keys.
<div class="list">
<label class="item item-input">
<span class="input-label">CEP Origem: </span>
<input type="text" id="origem" ng-model="cep.origem" ui-br-cep-mask>
</label>
<label class="item item-input">
<span class="input-label">CEP Destino: </span>
<input type="text" id="destino" ng-model="cep.destino" ui-br-cep-mask>
</label>
</div>
This is simply because both of your inputs are using the same ng-model. Simply set a different one should help you
ng-model defines the variable that will be edited by your input.
So, if your inputs have the same ng-model, it will edit the same variable.
Here you just have to change the ng-model of your second input:
<input type="text" id="origem" ng-model="cep1" ui-br-cep-mask>
<input type="text" id="destino" ng-model="cep2" ui-br-cep-mask>