I created a login form using ionic4 which yields me a floating text row to enter the login credentials.
<ion-content>
<ion-title class="ion-text-center" >Login</ion-title>
<ion-item>
<ion-label position="floating" >Email Id</ion-label>
<ion-input type="text" ></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating" >Password</ion-label>
<ion-input type="password" ></ion-input>
</ion-item>
<ion-text color="tertiary"><h6>Forgot Password?</h6></ion-text>
<div class="login-btn">
<ion-button class="login-button" expand="full">Login</ion-button>
</div>
<div class="not-a-member">
<ion-text>Not a member yet? </ion-text><ion-text color="tertiary"> Sign-Up</ion-text>
I want the rectangular input box in the form instead of floating text row.
Try this code:
<div style="margin: 10px;">
<ion-input type="email" placeholder="Email" [(ngModel)]="email" style="text-align: center; border: skyblue solid 0.5px;"></ion-input>
</div>
<div style="margin: 10px;">
<ion-input type="password" placeholder="Password" [(ngModel)]="password" style="text-align: center; border: skyblue solid 0.5px;"></ion-input>
</div>
Related
I add a spinner icon in my ionic project, but it doesn't up. I have tried to place the ionic-spinner item in different place in the html file, but it doesn't work. Can you help me to solve this problem?
HTML:
<ion-content>
<form (submit)="doLogin()">
<ion-list>
<ion-item>
<ion-label fixed>{{ 'EMAIL' | translate }}</ion-label>
<ion-input type="email" [(ngModel)]="account.email" name="email"></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>{{ 'PASSWORD' | translate }}</ion-label>
<ion-input type="password" [(ngModel)]="account.password" name="password"></ion-input>
</ion-item>
<div padding>
<button ion-button color="primary" block>{{ 'LOGIN_BUTTON' | translate }}</button>
</div>
</ion-list>
</form>
<ion-spinner name="lines"></ion-spinner>
</ion-content>
SCSS:
page-login {
ion-spinner {
width: 28px;
height: 28px;
stroke: #444;
fill: #222;
}
}
I'm getting a strange error when trying to change the radio button value and posting it in my soap writeData. For example I'm trying to change the gender from M to F, I console.log it and the value in result of the change is like this: rb-1-0
This is my code:
<div radio-group formControlName="gender" style="margin-top:-3%;margin-left:23%" [(ngModel)]="customer.SESSO">
<ion-radio color="dark" [value]="F" [checked]="customer.SESSO == 'f'"></ion-radio>
<span>
<strong style="position: absolute;margin-top: -1%; margin-left: 2%;font-size:16px">F</strong>
</span>
</div>
<div radio-group formControlName="gender" style="margin-left: 47%;margin-top: -10%" [(ngModel)]="customer.SESSO"
class="radio-privacy in-middle">
<ion-radio color="dark" [value]="M" [checked]="customer.SESSO == 'm'"></ion-radio>
<span>
<strong style="position: absolute;margin-top: -1%;margin-left: 4%;font-size:16px">M</strong>
</span>
</div>
This code should work fine for a normal radio button group, please customize the CSS as required.
<ion-list radio-group style="margin-top:-3%;margin-left:23%" [(ngModel)]="customer.SESSO">
<ion-item>
<ion-label>Female</ion-label>
<ion-radio color="dark" value="F" [checked]="customer.SESSO == 'F'"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Male</ion-label>
<ion-radio color="dark" value="M" [checked]="customer.SESSO == 'M'"></ion-radio>
</ion-item>
</ion-list>
I am trying to implement a validation for inputs in Ionic. For some reason the validation is not firing up. Please see my code below:
<form #loginForm="ngForm" novalidate>
<ion-card>
<ion-card-content>
<ion-item>
<ion-label floating>Email Address</ion-label>
<ion-input
[(ngModel)]="account.email"
type="email"
name="email"
#email="ngModel"
required
pattern="[A-Za-z0-9._%+-]{3,}#[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})"></ion-input>
</ion-item>
<div padding *ngIf="email.invalid && email.dirty">
<span>Email address is not valid.</span>
</div>
<ion-item>
<ion-label floating>Password</ion-label>
<ion-input
[(ngModel)]="account.password"
type="password"
name="password"
#password="ngModel"
required></ion-input>
</ion-item>
</ion-card-content>
<ion-row class="login-form__buttons">
<div>
<button ion-button (click)="navigateToRegisterPage()" color="secondary">Register</button>
<button ion-button (click)="login()" color="primary">Login</button>
</div>
</ion-row>
</ion-card>
</form>
The Email address is not valid. is not showing. I would really appreciate your help.
With the Ionic version 3.19.1, when you change something in the html of a component, the changes does not reflect. You have to change something at a .ts and save.
Can anybody please verify this code in pure ionic-2 format.
Since I am bit confuse to check properly.
If This is not good format then What it could be?
`<ion-content padding>
<div class="main-contain" col-12 col-sm-12 col-md-6 col-lg-4 col-xl-3>
<div class="header">
<h2 text-center class="vision">Vision Logistica</h2>
<hr col-6 class="hrow">
<h3 text-center class="vision">Ciao, inserisci i tuoi dati
per<br/>accedere
</h3>
<hr col-6 class="hrow">
</div>
<h5 text-center>oppure</h5>
<div class="form" col-11>
<form [formGroup]="login" >
<div class="username">
<ion-item>
<ion-label stacked class="labels">Username</ion-label>
<ion-input class="inputs" type="text"
[(ngModel)]="username" formControlName="username"></ion-input>
</ion-item>
</div>
<div class="password">
<ion-item>
<ion-label stacked class="labels">Password</ion-label>
<ion-input class="inputs" type="password"
[(ngModel)]="password" formControlName="password"></ion-input>
</ion-item>
</div>
</form>
</div>
</div>
</ion-content>`
if you using visual studio than use command Alt + shift + f to format the html code
<ion-content padding>
<div class="main-contain" col-12 col-sm-12 col-md-6 col-lg-4 col-xl-3>
<div class="header">
<h2 text-center class="vision">Vision Logistica</h2>
<hr col-6 class="hrow">
<h3 text-center class="vision">Ciao, inserisci i tuoi dati
per<br />accedere
</h3>
<hr col-6 class="hrow">
</div>
<h5 text-center>oppure</h5>
<div class="form" col-11>
<form [formGroup]="login">
<div class="username">
<ion-item>
<ion-label stacked class="labels">Username</ion-label>
<ion-input class="inputs" type="text" [(ngModel)]="username" formControlName="username"></ion-input>
</ion-item>
</div>
<div class="password">
<ion-item>
<ion-label stacked class="labels">Password</ion-label>
<ion-input class="inputs" type="password" [(ngModel)]="password" formControlName="password"></ion-input>
</ion-item>
</div>
</form>
</div>
</div>
</ion-content>`
Perfect right dear.
Alt + shift + f in visual studio code
and if you don't use visual studio code
you can format online if your code doesn't leak information in third party page
I am working on form input field i am able to display errors if the user enters wrong.
What i am expecting is when after the user complete is text in the input field and after that i should get the error message.
but i am getting the error message shown when user started is typing
here is my html code
<form [formGroup]="myForm" (ngSubmit)="submit()" >
<ion-row>
<ion-col>
<ion-item>
<ion-label primary floating>
FIRST NAME
</ion-label>
<ion-input type="text" id="firstname" class="form-control" formControlName="firstname"></ion-input>
</ion-item>
</ion-col>
<ion-col>
<ion-item>
<ion-label primary floating>
LAST NAME
</ion-label>
<ion-input type="text" id="lastname" class="form-control" formControlName="lastname"></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-item>
<ion-label primary floating>
USER ID (PHONE NO)
</ion-label>
<ion-input type="number" id="useridphone" class="form-control" formControlName="useridphone"></ion-input>
</ion-item>
<div *ngIf="submitAttempt">
<p *ngIf="myForm.controls.useridphone.errors && myForm.controls.useridphone.dirty " >
<small class="up" >
<strong><i>
Phone Number Must be 10 digits!
</i></strong>
</small>
</p>
</div>
<ion-item>
<ion-label primary floating>
PASSWORD
</ion-label>
<ion-input type="password" id="password" class="form-control" formControlName="password"></ion-input>
</ion-item>
<p *ngIf="myForm.controls.password.errors && myForm.controls.password.dirty">
<small class="up">
<strong><i>
Password must contain atleast (4),1-Char 1-Number
</i></strong>
</small>
</p>
<ion-item>
<ion-label primary floating>
CONFIRM PASSWORD
</ion-label>
<ion-input type="password" id="confirmpassword" class="form-control" formControlName="confirmpassword" ></ion-input>
</ion-item>
<ion-item>
<ion-label primary floating>
EMAIL
</ion-label>
<ion-input type="email" id="email" class="form-control" formControlName="email" ></ion-input>
</ion-item>
<p *ngIf="myForm.controls.email.errors && myForm.controls.email.dirty " class="alert alert-danger">
<small class="up">
<strong> <i>
Please Enter Valid Email Address!
</i></strong>
</small>
</p>
<div padding> </div>
<div padding> </div>
<button ion-button full round type="submit" [disabled]="!myForm.valid" color="secondary">SIGN UP</button> <br>
</form>
here is my ts file
passwordRegex: any = '(^(?=.*[a-z])(?=.*[0-9])[a-zA-Z0-9]+$)' ;
emailRegex: any = '^[a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$';
this.myForm = new FormGroup({
'firstname' : new FormControl('',[Validators.required,Validators.minLength(3),Validators.maxLength(10)]),
'lastname' : new FormControl('', [Validators.required,Validators.minLength(1),Validators.maxLength(10)]),
'useridphone' : new FormControl('', [Validators.required,Validators.minLength(10),Validators.maxLength(10)]),
'password' : new FormControl('',Validators.compose([Validators.required,Validators.minLength(4),Validators.maxLength(25),
Validators.pattern(this.passwordRegex)])),
'confirmpassword': new FormControl('',Validators.required),
'email' : new FormControl( '', Validators.compose([ Validators.required, Validators.pattern(this.emailRegex) ]) )
})
Use "onblur" event of HTML element.
<input type="text" name="name" value="value" onblur="validateText ( this )"/>
validateText will run when the user "leaves" the input field.
(User later indicated this was Ionic specific).
onBlur is (as far as I can see) an open issue in Ionic. It doesn't work. The recommendation from the github thread on this:
Here is a current work around for "blur".
Use "focusout" or "mouseleave". Those are both working.
https://github.com/driftyco/ionic/issues/5487
Note that in the github thread, it says that post beta-4 of Ionic, "blur" is working.