时间戳

首页 > 解决方案 > AlertInput 处理程序永远不会被调用

reactjs - AlertInput 处理程序永远不会被调用

问题描述

我将 Ionic 4 与 React 和 typescript 一起使用。

我正在寻找一个带有电子邮件输入和 2 个按钮“取消”和“接受”的警报。

我希望“接受”按钮仅在用户提供有效的电子邮件地址时可用。因此，我想在输入字段处理程序中使用正则表达式，但从不调用处理程序，在键入时也不在按 Enter 时调用。用户打字时如何让它被调用

async showAlert() {
  var promise = await alertController.create({
    header: "Recevez la photo dans votre boîte mail",
    inputs: [{
      name: "email",
      type: "email",
      placeholder: "email",
      handler: () => {
        console.log("input Fild Hanlder Called");
      }
    }],
    buttons: [{
        text: "cancel",
        role: "cancel",
        handler: cancel => {
          console.log("cancel");
        }
      },
      {
        text: "envoyer photo",
        role: "send",
        handler: (alertData) => {
          console.log((/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[A-Za-z]+$/.test((alertData.email))));
        }
      }
    ]
  });
  await promise.present();
  let result = await promise.onDidDismiss();
}

标签： reactjstypescriptionic-frameworkionic4

解决方案

tl;tr此功能未在 ionic4 中实现：ionic/issues/19059

在比较了用于在警报中呈现复选框的离子代码和任何其他输入元素之后，我得出了一个可悲的结论，即您正在寻找的功能不存在。

目前看起来handler警报中的输入仅支持复选框和无线电输入

ionic3有一个 PR，它添加了提供角度形式验证的validators选项，AlertInputs但在 ionic4 中不再存在。

据我所知，ionic3仍然存在一个未解决的问题，要求对警报输入进行输入验证，但对 ionic4 却没有。

更新： ionic4 的新功能请求

推荐阅读