Ionic 警报控制器输入框确认

rdrgkggo  于 2022-12-31  发布在  Ionic
关注(0)|答案(5)|浏览(224)

如何验证和显示Ionic 2或3中警报控制器的输入错误

let prompt = Alert.create({
      title: 'Alert input validation',
      message: "How can I validate below input field?",
      inputs: [ 
        {
          name: 'email',
          placeholder: 'email'
        },
      ],
      buttons: [
        {
          text: 'Save',
          handler: data => {
                        let validateObj = this.validateEmail(data);
                        if (!validateObj.isValid) {
                            alert(validateObj.message);
                            return false;
                        } else {
                            //make HTTP call
                        }
                    }
        }
      ]
    });

有人已经更新了警报控制器,并为离子团队拉请求。我认为离子团队计划在未来实现这一点。https://github.com/ionic-team/ionic/pull/12541
我需要一些解决这个验证功能。
平面图http://plnkr.co/edit/IBonfBJngky0h8UtMwMD?p=preview
感谢你的帮助。

ukqbszuj

ukqbszuj1#

目前该功能尚未实现,可以看到this Git issue
我在这里使用了Toast通知,我没有收到客户的任何抱怨:)
以下是我所做的。

  • 警报框的done处理程序:*
{
          text: 'Done',
          handler: (data) => {
            if (EmailValidator.isValid(data.email)) {
              if (this.data) {
                //my code
              } else {
                //my code
              }
              return true;
            } else {
              this.showErrorToast('Invalid Email');
              return false;
            }
          }
        }
  • 敬酒方法是这样的 *
showErrorToast(data: any) {
    let toast = this.toastCtrl.create({
      message: data,
      duration: 3000,
      position: 'top'
    });

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

    toast.present();
  }
  • UI *

pgccezyw

pgccezyw2#

我确实找到了一个使用setMessage方法的解决方案。最初消息将为空,当用户没有输入任何值时,验证消息将在单击时填充。请查找下面的代码片段

let prompt = Alert.create({
  title: 'Alert input validation',
  message: '',
  inputs: [ 
    {
      name: 'email',
      placeholder: 'email'
    },
  ],
  buttons: [
    {
      text: 'Save',
      handler: data => {
                    let validateObj = this.validateEmail(data);
                    if (!validateObj.isValid) {
                        prompt.setMessage('Your validation message');
                        return false;
                    } else {
                        //make HTTP call
                    }
                }
    }
  ]
});

您可以覆盖变量.scss文件中消息的字体,如下所示

$alert-md-message-text-color:red;

u2nhd7ah

u2nhd7ah3#

使用吐司的解决方案是完全有效的,但是从UX的Angular 来看,我发现它太多地分散了用户的注意力,以至于无法通过toast来打开警报和发送表单错误消息。
相反,我喜欢将验证附加到警报的DOM。这个例子是一个简单的警报,只有一个输入,但是可以很容易地用一些util方法扩展,以创建验证样板。我还在一个快速的stackblitz中创建了这个例子。在我的例子中,我已经在整个应用程序中包含了验证错误标记的变体,所以样式已经是全局的。我只需要引入标记来使它具有样式。

const alert = await this.alertController.create({
  header: 'Example Header',
  subHeader: 'Example Subheader',
  message: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
  backdropDismiss: false,
  cssClass: 'example-alert',
  inputs: [
    {
      type: 'text',
      name: 'mobilePhone',
      label: 'Mobile Phone',
      placeholder: 'Mobile phone (10 digits)',
      attributes: {
        maxlength: 10
      }
    }
  ],
  buttons: [
    {
      text: 'Ok',
      handler: (formData: { mobilePhone: string }) => {
        if (formData.mobilePhone && PhoneValidator.isValid(formData.mobilePhone)) 
          return formData;
        } else {
          // Only if no validation has been inserted into the DOM
          if (!alert.getElementsByClassName('validation-errors').length) {
            const input = alert.getElementsByTagName('input')[0];

            const validationErrors = document.createElement('div');
            validationErrors.className = 'validation-errors';

            const errorMessage = document.createElement('small');
            errorMessage.classList.add('error-message');
            errorMessage.textContent = 'Invalid phone number';

            validationErrors.appendChild(errorMessage);

            input.insertAdjacentElement('afterend', validationErrors);
          }

          return false;
        }
      }
    }
  ]
});

await alert.present();
.validation-errors {
  padding-top: 5px;
  text-align: left;

  .error-message {
    color: var(--ion-color-danger);
    font-size: 12px;
  }
}

// Example of markup:
//<div class="validation-errors">
//  <small class="error-message"></small>
//</div>
wtlkbnrh

wtlkbnrh4#

您可以使用REGX验证电子邮件。
这是示例。2只要用你函数替换这个函数。

validateEmail(data) {
    if( /(.+)@(.+){2,}\.(.+){2,}/.test(data.email) ){
      return {
        isValid: true,
        message: ''
      };
    } else {
       return {
          isValid: false,
          message: 'Email address is required'
       }
    }
}

我希望这能帮助到一些人。

z8dt9xmd

z8dt9xmd5#

我想出了一个鬼鬼祟祟的变通办法。如果你想要input字段在输入不正确时抖动(振动)或者在下面显示错误。你可以给予这个。
我在Ionic 6上测试了这个,但是我不确定早期版本(请随时尝试并更新此答案)
从本质上讲,alertController返回一个Ion element,您可以使用querySelector来定位inputs并添加您的样式和使用animate快捷方式方法。
@离子/(Angular /Angular /React)

import { alertController } from '@ionic/(vue/angular/react)'

const showAlert = async () => {
  const alert = await alertController.create({
    header: 'Personal details',
    backdropDismiss: false,
    buttons: [
      {
        text: 'Save',
        handler: (data) => {
          // Do you fields validation here
          let isEmailInvalid = !data.email

          shakeInputs(alert, 'email', isEmailInvalid)
  
          if (isEmailInvalid) {
            return false
          }
        }
      }
    ],
    inputs: [
      {
        name: 'email',
        placeholder: 'email'
      }
    ]
  })
}

function shakeInputs(alert, placeholder, isInvalid) {
  const input = alert.querySelector(`.alert-wrapper .alert-input-wrapper input[placeholder="${placeholder}"]`)
  if (input) {
    if (isInvalid) {
      input.classList.add('custom-input-error')

      const shake = [
        { offset: 0, transform: 'translateX(0)' },
        { offset: 0.25, transform: 'translateX(5px)' },
        { offset: 0.5, transform: 'translateX(-5px)' },
        { offset: 0.75, transform: 'translateX(5px)' },
        { offset: 1, transform: 'translateX(0)' }
      ]

      input.animate(shake, { duration: 200, iterations: 1 })
    } else {
      input.classList.remove('custom-input-error')
    }
  }
}

<style>
  .custom-input-error {
    border: 2px solid red;

    &::placeholder {
      --ion-placeholder-color: red;
    }
  }
</style>

相关问题