在Ionic 2 Angular 2中输入总位数时打开一个模态怎么样? [英] Open a modal when input a total number of digits in Ionic 2 Angular 2 how to?
问题描述
我试图在用户输入特定数字的位数时打开一个模态,但我所拥有的并不像我想要的那样,而是在点击时触发一个模态。
I am trying to open a modal when user type in a particular number of digits, but all I have does not look like what I want, instead it fires a modal upon click.
这就是我所做的:
test.html
<ion-card class="card-space">
<ion-item>
<ion-label stacked>Amount</ion-label> <!--I can use floating here but I prefer stacked-->
<ion-input type="text" placeholder="Input Amount" (itemSelected)="itemClicked($event)">
</ion-input>
</ion-item>
</ion-card>
test.ts
import {Component} from '@angular/core';
import {ModalController, NavController, NavParams} from 'ionic-angular';
import {Http} from "@angular/http";
import {CompleteTestProvider, ISearch} from "../../providers/complete-test";
import {CustomerDetailsPage} from "../customer-details/customer-details";
@Component({
selector: 'page-customer-issues-form',
templateUrl: 'customer-issues-form.html',
})
export class CustomerIssuesFormPage {
constructor(public navCtrl: NavController,
public navParams: NavParams,
private http: Http,
public completeTestProvider: CompleteTestProvider,
private _modalCtrl: ModalController) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad CustomerIssuesFormPage');
}
itemClicked(item: ISearch) {
console.log(item);
//so open the modal here
let modal = this._modalCtrl.create(CustomerDetailsPage, {customer:item});
modal.present();
}
}
我该如何解决这个问题?
我使用Ionic 2,Angular 2 with Typescript。
How do I go about this? Am using Ionic 2, Angular 2 with Typescript.
推荐答案
如您所说,您可以使用 ionInput
每次用户输入一个字符时执行一个函数,并将事件
作为参数传递给函数,你可以得到该值并用它来比较。这样做
As commented you can use ionInput
to execute a function everytime your user inputs a character and passing the event
as parameter to the function you can get the value and use it to compare. Do as this
你的HTML:
<ion-card class="card-space">
<ion-item>
<ion-label stacked>Amount</ion-label> <!--I can use floating here but I prefer stacked-->
<ion-input type="text" placeholder="Input Amount" (ionInput)="itemClicked($event)">
</ion-input>
</ion-item>
</ion-card>
您的.TS:
itemClicked(event: any) {
// GET THE USER INPUT
let userInput: string = event.target.value;
// COMPARE THE LENGTH WITH THE AMOUNT YOU WANT, I'LL USE 10
if(userInput.length == 10){
let modal = this._modalCtrl.create(CustomerDetailsPage, {customer:item});
modal.present();
}
}
这样就可以与你想要的长度进行比较它将会打开模态。
With this it'll compare with the length you want it to be and open the modal.
希望这会有所帮助。
这篇关于在Ionic 2 Angular 2中输入总位数时打开一个模态怎么样?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!