如何打開基於不規則數字/數字長度的模態？

Question

我試圖根據建議的答案here打開一個基於特定的一組數字輸入表單字段，它可以很好地設置一個單一的長度。

但是在我想打開用戶輸入不同長度數字的模式的情況下，我該如何解決？ 舉例，一些數字是10，一些是12，一些是15數字，我必須在任何長度上打開模態。因此，如果用戶輸入10位數字，或12位數字或15位數字，那麼3種長度中的任何一種都必須激發模態。我該如何解決它？對於Ionic 2，Angular 2和Typescript都是新手。

這裏是我做了什麼：

user.ts

export class CustomerIssuesFormPage { 

    constructor(public navCtrl: NavController, 
       public navParams: NavParams, 
       private http: Http, 
       public completeTestProvider: CompleteTestProvider, 
       private _modalCtrl: ModalController) { 
    } 

    // This works but wont deal with what I need 
    raiseModal(event: any) { 
    let input: string = event.target.value; 
    if(input.length == 10){ 
     let modal = this._modalCtrl.create(CustomerDetailsPage, {customer:event}); 
     modal.present(); 
    } 
    } 
} 

user.html

<ion-card class="card-space"> 
    <ion-item> 
    <ion-label stacked >Number</ion-label> 
     <ion-input 
     type="number" 
     (keyup)="raiseModal($event)"> 
     </ion-input> 
    </ion-item> 
</ion-card> 

Answer 1

所以你的情況這是一個有點複雜，不關於編程本身，但由於UX。

如果你的用戶有一個15位數的帳號，你不想讓他/她輸入10並打開一個模態，然後它關閉模態，再輸入2個數字並再次打開，所以它再次關閉，輸入更多3.所以有幾種方法可以做到這一點：

• 當用戶離開（失去焦點）的輸入。
• 當它按enter。

第一個你會在你的html中使用(blur)當用戶點擊遠離輸入時，你會調用一個方法來檢查賬號和打開模式。 但只是一個模糊：如果帳戶檢查是在一個API中對待它並返回組件頁來打開模式，它會更容易，並且會有更少的代碼。如果它不是來自API，只需使用if/else if/else或switch/case，因爲只會進行一些比較。

HTML

<ion-card class="card-space"> 
    <ion-item> 
    <ion-label stacked >Number</ion-label> 
     <ion-input 
     type="number" 
     (blur)="raiseModal($event)"> 
     </ion-input> 
    </ion-item> 
</ion-card> 

.TS

raiseModal(ev: any){ 
    let input: string = event.target.value; 

    if(input.length == 10){ 
    // OPEN MODAL FOR 10 DIGITS 
    } else if (input.length == 12) { 
    // OPEN MODAL FOR 12 DIGITS 
    } else if (input.length == 15) { 
    // OPEN MODAL FOR 15 DIGITS 
    } else { 
    // ERROR: INPUT LENGTH INVALID 
    }; 
} 

第二個選項是就像第一，但你必須要對你說的用戶按回車/去他的鍵盤，這樣你可以檢查帳戶信息，這樣您就可以在輸入的每個密鑰中獲得該事件。

HTML

<ion-card class="card-space"> 
    <ion-item> 
    <ion-label stacked>Input number and press 'Enter'</ion-label> 
     <ion-input 
     type="number" 
     (keyup)="raiseModal($event)"> 
     </ion-input> 
    </ion-item> 
</ion-card> 

.TS

raiseModal(ev: any){ 
    let input: string = event.target.value; 

    if(ev.keyCode == 13){ // can also be (ev.key == "Enter") 
    if(input.length == 10){ 
     // OPEN MODAL FOR 10 DIGITS 
    } else if (input.length == 12) { 
     // OPEN MODAL FOR 12 DIGITS 
    } else if (input.length == 15) { 
     // OPEN MODAL FOR 15 DIGITS 
    } else { 
     // ERROR: INPUT LENGTH INVALID 
    }; 
    }; 
} 

希望這有助於。