Question

我试图根据建议的答案here根据表单字段中输入的特定数字集打开一个模态，该设置只适用于设置一个长度。

但是如果我想在用户输入不同长度的数字时打开模态，我该怎么办？例如，有些数字是10，有些数字是12，有些数字是15，我必须在任何长度上打开模态。因此，如果用户输入10位数，或12位数或15位数，则这3个长度中的任何一个都必须触发模态。我该怎么办呢？我是Ionic 2的新手，Angular 2 with 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.所以有几种方法可以做到：

当用户离开（失去焦点）输入时。
按QSqlQuery query; query.prepare("insert into LineManager(LINEMANAGERID,LINEMANAGERNAME,BUSINESSGROUPID,STATUS) VALUES(:id,:name,:groupid:status)"); query.bindValue( ":id", lineManager.getLineManagerID() ); query.bindValue( ":name", lineManager.getLineManagerName() ); query.bindValue( ":groupid", lineManager.getBusinessGroupID() ); query.bindValue( ":status", lineManager.getStatus() ); query.exec();。

您在html中使用enter的第一个用户点击远离输入时，您将调用方法来检查帐号并打开模式。 但只是一个念头：如果帐户检查在API中处理，并返回组件页面以打开模式，它会更容易，而且代码会更少。如果它不是来自API，只需使用if / else if / else或switch / case，因为这只是一些比较。

HTML

(blur)

.TS

<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>

第二个选项就像第一个选项一样，但您必须告诉用户按键盘上的Enter / go键，以便查看帐户信息，这样您就可以了解相关信息。输入的每一把钥匙。

HTML

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
  };
}

.TS

<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>

希望这有帮助。

如何根据不规则数字/数字长度打开模态？

1 个答案: