Ionic using number keyboard when input type is text - ionic-framework

I'm building an app in Ionic for which I need to have a mask input where the user can input numbers, but the mask format is 99-99999999-9 (user can input numbers only). I'm using angular2-text-mask for masking the inputs.
If I have my input as type = number, the app crash when the mask is trying to add a "-" in the input. If I put type = text it works fine! But the keyboard is the regular one, so it's not the best user experience.
I thought that a good solution could be to have input type = text but find the way to show the number keyboard. Is that possible?
EDIT (adding code):
Component:
import { Component } from '#angular/core';
import { NavController, NavParams, AlertController } from 'ionic- angular';
import {Validators, FormBuilder} from '#angular/forms';
import { AccountInformation } from '../accountInformation/accountInformation';
import { TextMaskModule } from 'angular2-text-mask';
#Component({
selector: 'page-addAccount',
templateUrl: 'addAccount.html'
})
export class AddAccount {
account: any;
item: any;
public cuitMask = [/[1-9]/, /[1-9]/, '-', /[1-9]/, /[1-9]/, /[1-9]/, /[1-9]/, /[1-9]/, /[1-9]/, /[1-9]/, /[1-9]/, '-' , /[1-9]/]
constructor(public navCtrl: NavController, public navParams: NavParams, public alertCtrl: AlertController, private formBuilder: FormBuilder) {
this.account = this.formBuilder.group({
number: ['', Validators.required],
cuit: ['', Validators.required]
});
}
}
View:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
</ion-header>
<ion-content>
<ion-card>
<form [formGroup]="account" (ngSubmit)="submit()" novalidate>
<ion-list>
<ion-item>
<ion-label floating>Numero de Cuenta</ion-label>
<ion-input class="input-default" autofocus text-center type="number" formControlName="number"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>CUIT</ion-label>
<ion-input class="input-default" [textMask]="{mask : cuitMask}" autofocus text-center type="text" formControlName="cuit"></ion-input>
</ion-item>
<ion-item>
<button type="submit" class="footer-button" [disabled]="!account.valid" ion-button block>AGREGAR</button>
</ion-item>
</ion-list>
</form>
</ion-card>

Related

How to pass data to another page from Input Form in IONIC 5

I have an input form with 3 text input. The only thing i want it is to send this 3 datas to another page that i called "Identity". I'd like to know how can do to send this 3 datas to another page using ionic 5. I want to create a signing step by step style. someone can help please?
REGISTER.PAGE.HTML
<ion-content fullscreen="true" class="background-contact">
<div class="fixed">
<div class="div-3">
<div align="center">
<b>IDENTIFICATION</b>
</div>
<ion-label position="stacked" class="title">E-mail</ion-label>
<div align="center" class="input-class">
<ion-input autofocus="true" ngModel name="email" type="email" placeholder="informez votre email"></ion-input>
</div>
<div class="line">
<ion-label position="stacked" class="title">Mot de passe</ion-label>
<div align="center" class="input-class">
<ion-input ngModel name="password" type="password" placeholder="informez votre mot de passe"></ion-input>
</div>
</div>
<!-- <div class="line">
<ion-label position="stacked" class="title">Téléphone</ion-label>
<div align="center" class="input-class">
<ion-input autofocus="true" ngModel name="phone" type="text" placeholder="Tapez votre numéro de tel" (keypress)="numberOnlyValidation($event)"></ion-input>
</div>
</div> -->
<div class="line">
<ion-label position="stacked" class="title">Pays</ion-label>
<div align="center" >
<ion-select cancelText="Fermer" okText="Confirmer" ngModel name="cod_country">
<ion-select-option value="">Dans quel pays êtes-vous?</ion-select-option>
<ion-select-option value="{{item?.id}}" *ngFor="let item of country">{{item?.name}}</ion-select-option>
</ion-select>
</div>
</div>
<div class="line">
<div align="center" class="input-class">
<ion-button (click)="goToAboutPage()" expand="block" color="primary"><ion-spinner *ngIf="loading"></ion-spinner> CONFIRMER <ion-icon name="checkmark-done"></ion-icon></ion-button>
</div>
</div>
</div>
</div>
</ion-content>
RESGISTER.PAGE.TS
import { Component, OnInit } from '#angular/core';
import { AlertController, NavController, ToastController } from '#ionic/angular';
import { AuthService } from 'src/app/services/auth.service';
import { NgForm } from '#angular/forms';
import { AlertService } from 'src/app/services/alert.service';
import {IdentityPage} from 'src/app/identity/identity.page';
import { Router } from '#angular/router';
#Component({
selector: 'app-register',
templateUrl: './register.page.html',
styleUrls: ['./register.page.scss'],
})
export class RegisterPage implements OnInit {
loading: boolean;// loading chamando
country: any;
password:any;
private cod_country;
constructor(
private authService: AuthService,
private navCtrl: NavController,
private alertService: AlertService,
public alertController: AlertController,
private toast: ToastController,
private router: Router,
) {
this.getCountry();
}
ngOnInit() {
}
//Get all country list
getCountry(){
this.authService.getCountry().subscribe(country=>{
this.country = country;
})
}
// navigate to about page
goToAboutPage(data) {
this.router.navigate(['/identity'],{
queryParams:data
})
}
}
There are Multiple Ways to pass data from 1 page to other page.
Method 1:
Use Angular Router with params
Page 1:
goToNewPage(){
this.router.navigate(['/identity'],{
queryParams: JSON.Stringify(data)
})
}
Page 2:
import {ActivatedRoute} from '#angular/router';
constructor(private activatedRoute: ActivatedRoute){
this.activatedRoute.queryParams.subscribe(params => {
console.log(params)
});
}
Method 2:
Create a GlobalDataProviderService.
Run Command:
ionic generate service globaldata
inside Globaldata class:
public static userObject:any;
Import this class on your both pages and initialize your variable.
Page 1:
goToNewPage(){
GlobaldataService.userObject = YourData;
this.router.navigate(['/identity'])
}
Page 2:
import this class:
inside Constructor or lifeCycle Hook.
yourVaribale = GlobaldataService.usrObject;
Method 3 for Real time Update:
Check my Other Answer: Real Time Data Update
Page 1 html code
<ion-row>
<ion-col size="12">
<ion-item>
<ion-label position="stacked">E-Mail</ion-label>
<ion-input type="email" [(ngModel)]="email"></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Password</ion-label>
<ion-input type="password" [(ngModel)]="password"></ion-input>
</ion-item>
<ion-item>
<ion-label>Country</ion-label>
<ion-select placeholder="Select Country" [(ngModel)]="country">
<ion-select-option value="India">India</ion-select-option>
<ion-select-option value="Usa">Usa</ion-select-option>
</ion-select>
</ion-item>
</ion-col>
<ion-col size="12" class="ion-text-center">
<ion-button (click)="goToAboutPage()" expand="block" shape="round">
Click me
</ion-button>
</ion-col>
</ion-row>
Page 1 ts code
public country: string;
public email: string;
public password: string;
constructor(public nav: NavController) {}
goToAboutPage() {
let params: any = {
country: this.country,
email: this.email,
password: this.password
}
this.nav.navigateForward('/identity', { state: params }); // params to pass object/array
}
Page 2
constructor(public router: Router){
if (router.getCurrentNavigation().extras.state) {
const params = this.router.getCurrentNavigation().extras.state;
console.log(params.email)
console.log(params.password)
console.log(params.country)
}
}

Login using API in Ionic 6

## login.page.ts ##
import { Component, OnInit } from '#angular/core';
import { AuthService } from 'src/services/auth/auth.service';
import { NavController } from '#ionic/angular';
import { AlertService } from 'src/services/alert/alert.service';
import { NgForm } from '#angular/forms';
#Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss']
})
export class LoginPage implements OnInit {
constructor(
private authService: AuthService,
private navCtrl: NavController,
private alertService: AlertService
) { }
ngOnInit() {
}
onLogin(form: NgForm) {
this.authService.login(form.value.username, form.value.password).subscribe(
() => {
this.alertService.presentToast("Logged In");
this.navCtrl.navigateRoot('/welcome');
},
error => {
console.log(error);
},
() => {
this.alertService.presentToast("Failed");
this.navCtrl.navigateRoot('/login');
}
);
}
}
## login.page.scss ##
ion-content.background{
--background: url(../../assets/img/staffandtruck.jpg) 0 0/100% 100% no-repeat;
}
## login.page.html ##
<ion-content padding class="background">
<ion-card>
<img src="assets/img/logo2.png"/>
</ion-card>
<ion-card>
<ion-card-content>
<form #form="ngForm" (ngSubmit)="onLogin(form)">
<ion-item>
<ion-icon slot="start" name="person-circle"></ion-icon>
<ion-label position="floating">Staff ID</ion-label>
<ion-input type="email" name="username" ngModel required></ion-input>
</ion-item>
<ion-item>
<ion-icon slot="start" name="key"></ion-icon>
<ion-label position="floating">Password</ion-label>
<ion-input type="password" name="password" ngModel required></ion-input>
</ion-item>
<ion-card-content>
<ion-button expand="block" color="primary" type="submit">Log in</ion-button>
</ion-card-content>
</form>
</ion-card-content>
</ion-card>
</ion-content>
i am new here and beginner in Ionic Framework. Is there anyone can help me and teach me on how to create a login using API that call username and password without create a Model for User? I don't know how to startup and implement this API. This is my environment setup for Ionic.
My environment setup for Ionic. This is for environment service that calling API for login EnvService.ts. This is for auth service AuthService.ts. But, that all not functioning as I wish.

Not able to show the errors after user type some value in Ionic

I am working in Ionic Project and I have used form but when I am showing the errors so my errors are not coming.
This is my orderform.html:
<ion-content padding>
<p class="newp11">Order Number: {{orderpa}}</p>
<h2 class="myformh2">Fill Your Account Detail's</h2>
<form [formGroup]="cancelorderde" (ngSubmit)="cancelorderDetails()">
<ion-list>
<ion-item class="newitem2">
<ion-input placeholder="IFSC Code*" type="text" formControlName="ifsc_code" required></ion-input>
<p *ngIf="cancelorderde.controls['ifsc_code'].errors" class="danger" padding>IFSC Code Is Not Valid</p>
</ion-item>
<div>
<button [disabled]="!cancelorderde.valid" ion-button type="submit" class="newbtn11" color="primary" block>Cancel Order</button>
</div>
</ion-list>
</form>
</ion-content>
In this html, I have shown one error but it is not coming as the user type some wrong input.
This is my orderform.ts:
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {Validators, FormBuilder, FormGroup } from '#angular/forms';
#IonicPage()
#Component({
selector: 'page-cancelorder',
templateUrl: 'cancelorder.html',
})
export class CancelorderPage {
cancelorderde : FormGroup;
orderpa: any;
constructor(public navCtrl: NavController, public navParams: NavParams,
private formBuilder: FormBuilder) {
this.cancelorderde = this.formBuilder.group({
holder_name: ['', Validators.required],
bank_name: ['', Validators.required],
branch_name: ['', Validators.required],
account_number: ['', Validators.required],
ifsc_code: ['', Validators.compose([
Validators.required,
Validators.pattern('^[A-Za-z]{4}[a-zA-Z0-9]{7}$')
])],
mobile_number: ['', Validators.compose([
Validators.maxLength(10),
Validators.minLength(10),
Validators.required
])],
reason: ['', Validators.required],
remark: ['', Validators.required],
});
this.orderpa = navParams.get('orderno');
}
ionViewDidLoad() {
console.log('ionViewDidLoad CancelorderPage');
}
cancelorderDetails()
{
console.log(this.cancelorderde.value);
}
}
In this ts file, I have validated the IFSC Code but after that also the error is not coming but the user is not able to click on Submit Button.
I want that when the user enter the wrong input, it should the error to the user and when there is no error, user can click on submit button.
Any help is much appreciated.
Just Try This: It will work.
<ion-content padding>
<p class="newp11">Order Number: {{orderpa}}</p>
<h2 class="myformh2">Fill Your Account Detail's</h2>
<form [formGroup]="cancelorderde" (ngSubmit)="cancelorderDetails()">
<ion-list>
<ion-item class="newitem2">
<ion-input placeholder="IFSC Code*" type="text" formControlName="ifsc_code" required></ion-input>
</ion-item>
<p *ngIf="cancelorderde.controls['ifsc_code'].errors && cancelorderde.controls['ifsc_code'].dirty && cancelorderde.get('ifsc_code').touched" class="danger" padding>IFSC Code Is Not Valid</p>
<div>
<button [disabled]="!cancelorderde.valid" ion-button type="submit" class="newbtn11" color="primary" block>Cancel Order</button>
</div>
</ion-list>
</form>
</ion-content>
Move p tag out of the item tag. It will show the error according to the question asked and solved your problem.

Ionic2 serve shows blank screen after using formbuilder

I have a Login page. It was working fine. I changed the login form to use FormBuilder.
There is no error during build process or any reported in the developer tool. But the application shows blank screen when running with ionic serve.
Below is the code changed in login.html.
<form [formGroup]="loginForm" (ngSubmit)="login(loginForm.value)" >
<ion-row>
<ion-col>
<ion-list inset>
<ion-item>
<ion-input type="text" placeholder="Username" formControlName="username" ></ion-input>
</ion-item>
<p *ngIf="username.hasError('required') && username.touched" danger>Username is required</p>
<ion-item>
<ion-input type="password" placeholder="Password" formControlName="password"></ion-input>
</ion-item>
<p *ngIf="password.hasError('required') && password.touched" danger>Password is required</p>
</ion-list>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="signup-col">
<button ion-button class="submit-btn" full type="submit" [disabled]="!loginForm.valid">Login</button>
<button ion-button class="register-btn" block clear (click)="createAccount()">Create New Account</button>
</ion-col>
</ion-row>
</form>
Below is the code changed in login.ts.
import { Component } from '#angular/core';
import { NavController, AlertController, LoadingController, Loading } from 'ionic-angular';
import { FormBuilder, FormGroup, FormControl, Validators } from '#angular/forms';
import { AuthService } from '../../providers/auth-service';
import { RegisterPage } from '../register/register';
import { HomePage } from '../home/home';
#Component({
selector: 'page-login',
templateUrl: 'login.html'
})
export class LoginPage {
loading: Loading;
registerCredentials = {username: '', password: ''};
loginForm: FormGroup;
username: FormControl;
password: FormControl;
constructor(private nav: NavController, private auth: AuthService,
private alertCtrl: AlertController, private loadingCtrl: LoadingController,
public formBuilder: FormBuilder) {
this.loginForm = formBuilder.group({
username: ['', Validators.required],
password: ['', Validators.required],
});
this.username = this.loginForm['username'];
this.password = this.loginForm['password'];
}

How do I in ionic 2 pass data from a modal with a form on, to the home page?

Hi there can anyone help out. I am new to Ionic and Angular. I am trying to create a weather app in Ionic 2.
I have created a Home page with a Click event calling an AddWeather() function.
The function opens up a modal with a form attached. I am trying to pass data from the form on the modal back to the home page an output on the screen. I have tried ngModel but can't seem to get it working correctly.
Here is my Code: (home.ts)
import { Component } from '#angular/core';
import { NavController, ModalController, NavParams } from 'ionic-angular';
import { AddPage } from '../add/add';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public weatherList = [];
constructor(public navCtrl: NavController, public modalCtrl: ModalController) {
}
addWeather() {
let addWeatherModal = this.modalCtrl.create(AddPage);
addWeatherModal.present();
}
}
(add.html)
<ion-header>
<ion-navbar color="weatherbru">
<ion-title>Modal</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="CloseModal()"><ion-icon name="close"></ion-icon></button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<form>
<ion-item>
<ion-label stacked>City</ion-label>
<ion-input type="text" ></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Country</ion-label>
<ion-select >
<ion-option value="us">United States</ion-option>
<ion-option value="uk">United Kingdom</ion-option>
</ion-select>
</ion-item>
<button ion-button block (click)="CloseModal()">Add Weather</button>
</form>
<div padding>
</div>
</ion-content>
(add.ts)
import { Component } from '#angular/core';
import { ModalController } from 'ionic-angular';
import { NavController, NavParams, ViewController } from 'ionic-angular';
#Component({
selector: 'page-add',
templateUrl: 'add.html'
})
export class AddPage {
constructor(public viewCtrl: ViewController, public navCtrl: NavController, public navParams: NavParams) {}
CloseModal() {
this.viewCtrl.dismiss();
}
}
In your html :
<form>
<ion-item>
<ion-label stacked>City</ion-label>
<ion-input [(ngModel)]="form.city" type="text" ></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Country</ion-label>
<ion-select [(ngModel)]="form.country">
<ion-option value="us">United States</ion-option>
<ion-option value="uk">United Kingdom</ion-option>
</ion-select>
</ion-item>
<button ion-button block (click)="CloseModal()">Add Weather</button>
</form>
In your add.ts file :
export class AddPage {
form : any; //Declare the form object to be bound to your html
constructor(public viewCtrl: ViewController, public navCtrl: NavController, public navParams: NavParams) {}
CloseModal() {
this.viewCtrl.dismiss(this.form); //Send back the form object when closeModal is called
}
}
In your home.ts :
addWeather() {
let addWeatherModal = this.modalCtrl.create(AddPage);
addWeatherModal.present();
addWeatherModal.onDidDismiss(data=>{ //This is a listener which wil get the data passed from modal when the modal's view controller is dismissed
console.log("Data =>", data) //This will log the form entered by user in add modal.
})
}