How to slide to the top of the page in ionic 3 - ionic-framework

I am developing a SIgnup page in ionic 3 and the no of fields are 10.
SO I am using a p tag to show validation and when the user hits submit I want to take him all the way up to the start of the page which has my header and all.How can I achieve this?I have tried everything.
Below is my code:
<ion-content padding class="label-cl green-bg acct-sct item-row" style="position:fixed">
<h2 class="center-col">Create An Account</h2>
<form #f="ngForm" (ngSubmit)="signUp(f)">
<ion-item>
<ion-label floating>Username</ion-label>
<ion-input type="text" name="name" ngModel required></ion-input>
</ion-item>
<p style="color:red;text-align: left" *ngIf="usernameError">Invalid Username</p>
<ion-item>
<ion-label floating>Email</ion-label>
<ion-input type="email" name="email" ngModel required></ion-input>
</ion-item>
<p style="color:red;text-align: left" *ngIf="emailError">Invalid E-mail</p>
<ion-item>
<ion-label floating>Password</ion-label>
<ion-input type="Password" name="password" ngModel required></ion-input>
</ion-item>
<p style="color:red;text-align: left" *ngIf="passwordLengthError">Invalid Password</p>
<ion-item>
<ion-label floating>Confirm Password</ion-label>
<ion-input type="Password" name="confirm_password" ngModel required></ion-input>
</ion-item>
<div class="button-inline">
<button ion-button class="yellow-cl" [disabled]="!f.valid">Submit</button>
</div>
</form>
</ion-content>
It has more fields but I am showing only these just for the sake of clarity.
Thanks in advance.

Add the below code to your .ts file
import { Component, ViewChild } from '#angular/core';
import { Content } from 'ionic-angular';
#Component({...})
export class SignUpPage{
#ViewChild(Content) content: Content;
signUp() {
this.content.scrollToTop();
}
}
We used Angular's #ViewChild annotation to get a reference to the ionic content component which has the method scrollToTop().
Find more details in the Official docs

Related

Value in input field will not display in ionic

I prefilled ion-input with a value but it is not displaying. I am new to ionic but I understand little of it concepts.
Here is what I tried.
.ts
async getSimData() {
try {
let simPermission = await this.sim.requestReadPermission();
if (simPermission == "OK") {
let simData = await this.sim.getSimInfo();
this.simInfo = simData;
this.cards = simData.cards;
}
} catch (error) {
console.log(error);
}
}
html
<ion-card *ngFor= "let card of cards" >
<ion-card-content>
<ion-list>
<ion-item>
<ion-input type="number" name="phone" value="{{ card.phoneNumber }}" #phone disabled="true"></ion-input>
</ion-item>
</ion-list>
</ion-card-content>
</ion-card>
How can I make this appear in the ion-input?
you can also use with ngModel, i checked your code it is also working with value.
In below code both are working, check this : https://stackblitz.com/edit/ionic-eu7tcl
<ion-card *ngFor= "let card of cards" >
<ion-card-content>
<ion-list>
<ion-item>
<ion-input type="number" name="phone" [(ngModel)]="card.phoneNumber" #phone disabled="true"></ion-input>
<ion-input type="number" name="phone" value="{{ card.phoneNumber }}" #phone disabled="true"></ion-input>
</ion-item>
</ion-list>
</ion-card-content>
</ion-card>

My Keyboard Enter is not working to submit the form in Ionic 4

I am working in my Ionic 4 app and I have a form in that my keyboard enter is not working in Android.
This is my signin.page.html:
<form [formGroup]="userlogindet" (ngSubmit)="UserLoginDetails()">
<ion-list>
<ion-item class="newitem2">
<ion-input placeholder="Email*" type="email" formControlName="email"></ion-input>
</ion-item>
<p *ngIf="userlogindet.get('email').errors && userlogindet.get('email').dirty && userlogindet.get('email').touched"
class="myp2">EMAIL_NOT_VALID</p>
<ion-item class="newitem2">
<ion-input placeholder="Password*" type="password" formControlName="password" required></ion-input>
</ion-item>
<ion-input type="hidden" formControlName="social_type" hidden></ion-input>
</ion-list>
<ion-button [disabled]="!userlogindet.valid" class="mybtn1" type="submit" color="danger" (keyup.enter)="enablelogintracking()" expand="full" fill="solid">Login
</ion-button>
</form>
In this html file, I have a signin page in which I have the login button but it is not working when using the keyboard enter.
I have also used the (keyup.enter) after that also it is not working.
Any help is much appreciated.

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.

Ionic input field does not move to next field automatically

Im using ionic 3 for my mobile application, I have some issues with my input fields which do not move automatically to the next field. For example when I click the first input filed and fill the first one, the cursor does not move to the next field. How to do that correctly?
<ion-grid>
<ion-row>
<ion-col>
<ion-item >
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="1" ></ion-input>
</ion-item>
</ion-col>
<ion-col >
<ion-item>
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="2" ></ion-input>
</ion-item>
</ion-col>
<ion-col >
<ion-item>
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="3" ></ion-input>
</ion-item>
</ion-col>
<ion-col >
<ion-item>
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="4" ></ion-input>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
You can use the following approach, there could be better approaches i'm just sharing what i know.
What i am doing here is setting a reference of the next element (eg: #b), and on keyup event i am passing that reference to my function in .ts file which only calls the .setFocus() on the referenced element.
<ion-grid>
<ion-row>
<ion-col>
<ion-item >
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="1" (keyup)="moveFocus(b)" ></ion-input>
</ion-item>
</ion-col>
<ion-col >
<ion-item>
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="2" #b (keyup)="moveFocus(c)" ></ion-input>
</ion-item>
</ion-col>
<ion-col >
<ion-item>
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="3" #c (keyup)="moveFocus(d)" ></ion-input>
</ion-item>
</ion-col>
<ion-col >
<ion-item>
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="4" #d ></ion-input>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
.ts:
import { Component } from '#angular/core';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor() {
}
moveFocus(nextElement) {
nextElement.focus();
}
}
You can try something with the (keyup) or (keydown) events. There is also documentation available on the angular docs that talks about forms and user Input.
HTML
<input (keyup)="onKey($event)">
.ts
onKey(event) {
if (event.key === "Enter") {
console.log(event);
}
}
This can be achieved by using the nextElementSibling , you can use the Keyup event to achieve this , here is the Pseudo code
Add keyup event to the event fields as follows (keyup)="keytab($event)"
keytab(event){
let element = event.srcElement.nextElementSibling; // get the sibling element
if(element == null) // check if its null
return;
else
element.focus(); // focus if not null
}
In order to make it more clear manner you can create a directive also as follows
tabindex.directive.ts:
import { Directive, HostListener, Input } from '#angular/core';
import { TextInput } from 'ionic-angular';
#Directive({
selector: '[yourTabindex]'
})
export class TabindexDirective {
constructor(private inputRef: TextInput) { }
#HostListener('keydown', ['$event']) onInputChange(e) {
var code = e.keyCode || e.which;
if (code === 13) {
e.preventDefault();
this.inputRef.focusNext();
}
}
}
Don't forget to include this directive in Modules page and you can use it on your input fields as follows ,as a sample:
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="1" yourTabindex ></ion-input>
Adding "scrollAssist: true" and "autoFocusAssist: true" to app.module in the #ngModule would solve this problem.
imports: [
IonicModule.forRoot(MyApp, {
scrollAssist: true,
autoFocusAssist: true
})
],

Proper way to handle fields with same names in Forms

I met strange bug in my application. I template driven form with two addresses two fill:
<ion-list>
<ion-list-header color="secondary">From
<button ion-button icon-only item-right clear small (click)="usePosition($event)">
<ion-icon name="locate"></ion-icon>
</button>
<button ion-button icon-only item-right clear small (click)="searchAddress(true,$event)">
<ion-icon name="search"></ion-icon>
</button>
<button ion-button icon-only item-right clear small (click)="useHome(true,$event)">
<ion-icon name="home"></ion-icon>
</button>
</ion-list-header>
<div>
<ion-item>
<ion-label floating>Street Address*</ion-label>
<ion-input type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="createRequest.legs[0].addressFrom.Street"
required></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Floor/Apartment</ion-label>
<ion-input type="text"
name="Extention"
[ngModelOptions]="{standalone: true}"
[(ngModel)]="createRequest.legs[0].addressFrom.Extention"></ion-input>
</ion-item>
<ion-item padding>
<ion-label floating>City or Borough*</ion-label>
<ion-input type="text" required name="City"
pattern="[a-zA-Z ]*"
[ngModelOptions]="{standalone: true}"
[(ngModel)]="createRequest.legs[0].addressFrom.City">
</ion-input>
</ion-item>
<ion-item padding-bottom>
<ion-label floating>
Zip Code*(5 digits)
</ion-label>
<ion-input type="tel" name="Zip" #ZipF="ngModel"
pattern="\d{5}"
[textMask]="{mask:masks.zip}"
[ngModelOptions]="{standalone: true}"
[(ngModel)]="createRequest.legs[0].addressFrom.Zip"
></ion-input>
</ion-item>
</div>
</ion-list>
<ion-list padding-bottom padding-top>
<ion-list-header>To
<button ion-button icon-only item-right clear small (click)="searchAddress(false,$event)">
<ion-icon name="search"></ion-icon>
</button>
<button ion-button icon-only item-right clear small (click)="useHome(false,$event)">
<ion-icon name="home"></ion-icon>
</button>
</ion-list-header>
<ion-item>
<ion-label floating>Street Address*</ion-label>
<ion-input type="text"
[ngModelOptions]="{standalone: true}"
#Street="ngModel"
[(ngModel)]="createRequest.legs[0].addressTo.Street"
required></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Floor/Apartment</ion-label>
<ion-input type="text"
[ngModelOptions]="{standalone: true}"
#Extention="ngModel"
[(ngModel)]="createRequest.legs[0].addressTo.Extention"
></ion-input>
</ion-item>
<ion-item padding>
<ion-label floating>City or Borough*</ion-label>
<ion-input type="text"
pattern="[a-zA-Z ]*"
#City="ngModel"
[ngModelOptions]="{standalone: true}"
[(ngModel)]="createRequest.legs[0].addressTo.City">
</ion-input>
</ion-item>
<ion-item>
<ion-label floating>Zip Code(5 digits)</ion-label>
<ion-input type="tel" #Zip="ngModel"
pattern="\d{5}"
[ngModelOptions]="{standalone: true}"
[textMask]="{mask:masks.zip}"
[(ngModel)]="createRequest.legs[0].addressTo.Zip"
></ion-input>
</ion-item>
</ion-list>
I tried to use [ngModelOptions]="{standalone: true}" but without any result.
At some moment for unkonown reason two addresses start duplicate each other and even stranger thing in this case that using predefined data(like in useHome() method) didn't give effect. I know that answer is near, so will appreciate any help in advance.
Use unique name attributes for your form fields, this way each form field will be evaluated as separate one. I see some inconsistency in the use of the name attribute, all should have a name attribute, as well as #someName="ngModel" if you want to use validation. Loose the ngModelOptions altogether. I would separate these and do for example From... and To... for the name attribute:
For example the two fields for Street:
<ion-input name="FromStreet" #FromStreet="ngModel"
[(ngModel)]="createRequest.legs[0].addressFrom.Street" required>
</ion-input>
and
<ion-input type="text" name="ToStreet" #ToStreet="ngModel"
[(ngModel)]="createRequest.legs[0].addressTo.Street" required>
</ion-input>
This way all fields are unique.
This line of code:
[ngModelOptions]="{standalone: true}"
Is telling the form that your input element is NOT included as part of the form's data. You only want to do that with controls that you don't want to track on submittal. For example, say you have a checkbox that simply opens or closes a part of the user interface. You don't want that part of the submitted data, so you would use the standalone option so it "stands alone" from the form and its data.