當在Ionic 2中輸入總位數時打開一個模態Angular 2如何？

我試圖打開一個模式，當用戶輸入特定數量的數字時，但我看起來並不像我想要的那樣，而是點擊時觸發一個模式。當在Ionic 2中輸入總位數時打開一個模態Angular 2如何？

這是我做了什麼：

的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和Typescript。

來源

2017-10-12 Afolabi Olaoluwa Akinwumi

正如評論，你可以使用ionInput執行一個功能，每次你的用戶輸入一個字符，並通過event作爲參數的函數，你可以得到的價值，並用它來比較。這樣做，因爲這

你的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(); 
    } 
}

有了這個，它會與你希望它是，打開模態的長度進行比較。

希望這會有所幫助。

來源

2017-10-13 12:36:14

，但從Typescript出現錯誤說：屬性'值'不存在類型'EventTarget' –

除了使用（itemSelected）=，使用（輸入）= 「itemClicked（$事件）」，然後你可以用$ event.target.value每次改變時間得到價值。然後，當它是你想要的長度或價值時，打開模式。

來源

2017-10-12 13:22:02 Santiago

你可以進一步解釋一下給出一個例子片段的'$ event.target.value'部分，是Angular 2處女@Santiago –

在你的方法中，itemClicked會被多次調用，你應該可以使用item .target.value查看輸入字段的值來檢查長度。 – Santiago

當在Ionic 2中輸入總位數時打開一個模態Angular 2如何？

回答

相關問題