如何在Ionic V3中的AlertBox中设置输入限制

Question

So i'm creating an alert box,and it has some inputs,and i want to restrict that input to max 10 characters and also make sure only numbers are entered into it

I couldn't find any guides on that,any help would be appreciated

>  const alert = this.alertCtrl.create({
                                            title: 'Please Enter your Mobile',
                                            inputs: [
                                            {
                                                name: 'mobile',
                                                placeholder: 'Mobile'
                                            }

                                            ],
                                            buttons: [
                                            {
                                                text: 'Done',
                                                handler: data => {
                                                            if (data.mobile != "" || data.mobile != null) {
                                                                    this.data3 = data.mobile;
                                                                    this.storage.set('number',data.mobile);

                                                            } 
                                                            else {
                                                                    this.ionViewDidLoad();
                                                            }
                                                }
                                            }
                                            ]
                                });
                                alert.present();

Here's my code,i want to restrict the input field mobile to 10 characters and make it only take numerical values and also is it possible to check if its empty or not

Answer 1

You can use Toast notification here.

alert boxe's done handler:

{
          text: 'Done',
          handler: (data) => {
            if (MyValidator.isValid(data.mobile)) {
              if (this.data) {
                //my code
              } else {
                //my code
              }
              return true;
            } else {
              this.showErrorToast('Invalid mobile');
              return false;
            }
          }
        }

Note: Here MyValidator is a validation class where you can use according to your use case.

Toast method is like this:

showErrorToast(data: any) {
    let toast = this.toastCtrl.create({
      message: data,
      duration: 3000,
      position: 'top'
    });

    toast.onDidDismiss(() => {
      console.log('Dismissed toast');
    });

    toast.present();
  }

You can see this for more info.