带有 JavaScript 的 ionic 5 警报按钮答案

【问题标题】：ionic 5 alert buttons with JavaScript带有 JavaScript 的 ionic 5 警报按钮
【发布时间】：2021-10-23 02:00:53
【问题描述】：

不使用任何 Javascript 框架或类，我正在使用纯 Javascript 和 Ionic 5 。当用户点击 Add 按钮时，我正在尝试显示警报通知如果用户没有填写字段然后按添加按钮，则会弹出警报通知用户填写字段

注意：添加按钮的作用也是添加两个字段

问题是当点击添加按钮时，没有弹出通知

这里是代码

HTML 部分

<ion-alert-controller></ion-alert-controller>

在 app.js 文件中

    const btnConfirm = document.querySelector('#btn-confirm');
    const alertCtrl = document.querySelector('ion-alert-contrller');

    btnConfirm.addEventListener('click' ,() => {
 
  const enterReason = reasonInput.value;
 
 const enterInput = parseFloat(amountInput.value).toFixed(2);

   if(enterReason.trim().length <=0 || enterInput <= 0 || enterInput.trim().length <=0
   
   ) {

      async function handleButtonClick() {

         const alert = await alertController.create({
          message: 'Please enter valid reason and amount!',
          header: 'Invalid Inputs',
          buttons: ['Okay']
         });

         await alert.present();

          
      }

       return; // if values are Invalid - stop execution

【问题讨论】：

标签： ionic-framework ionic5 typescript

【解决方案1】：

你应该这样做：

const btnConfirm = document.querySelector('#btn-confirm');

    btnConfirm.addEventListener('click' ,() => {
      
      const enterReason = reasonInput.value;
      const enterInput = parseFloat(amountInput.value).toFixed(2);

      if(enterReason.trim().length <=0 || enterInput <= 0 || enterInput.trim().length <=0) {

          presentAlert(); // call your alert function when input is invalid
          return;

      }else{
        // continue execution
      }

    })

// keep your alert as a function. and call it when ever you want. 

    async function presentAlert() { 
      const alert = document.createElement('ion-alert');
      alert.cssClass = 'my-custom-class';
      alert.header = 'Alert';
      alert.subHeader = 'Subtitle';
      alert.message = 'This is an alert message.';
      alert.buttons = ['OK'];

      document.body.appendChild(alert);
      await alert.present();

      const { role } = await alert.onDidDismiss();
      console.log('onDidDismiss resolved with role', role);
    }

【讨论】：