Rectangular box as input value in ionic form - ionic-framework

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

Why ionic spinner doesn't show up in my project?

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;
}
}

Wrong value when ion-radio changed

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>

Ionic 3 validation is not working on "invalid && dirty"

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.

verify of ionic code structure

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

How to show error message in form validation after completing the user entering

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.