typescript 警报控制器输入框验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45969821/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Alert controller input box validation
提问by CharanRoot
How to validate and show error for Input in Alert Controller in Ionic 2 or 3
如何验证和显示 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
}
}
}
]
});
Some one already updated alertcontroller and did pull request for Ionic team. i think Ionic team planning implement this in future. https://github.com/ionic-team/ionic/pull/12541
有人已经更新了 alertcontroller 并为 Ionic 团队做了拉取请求。我认为 Ionic 团队计划在未来实现这一点。 https://github.com/ionic-team/ionic/pull/12541
I need some work around for this validation feature.
我需要一些解决此验证功能的方法。
plnkr http://plnkr.co/edit/IBonfBJngky0h8UtMwMD?p=preview
plnkr http://plnkr.co/edit/IBonfBJngky0h8UtMwMD?p=preview
Appreciate your help.
感谢你的帮助。
回答by Sampath
At this moment this feature has not been implemented.You can see this Git issue.
目前这个功能还没有实现。你可以看到这个 Git 问题。
I have used Toastnotification here and I didn't get any complaint about it from my client :)
我在Toast这里使用了通知，但我没有收到客户的任何投诉:)
Here is what I have done.
这是我所做的。
alert boxe's donehandler:
警报框的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;
}
}
}
Toast method is like this:
Toast方法是这样的：
showErrorToast(data: any) {
let toast = this.toastCtrl.create({
message: data,
duration: 3000,
position: 'top'
});
toast.onDidDismiss(() => {
console.log('Dismissed toast');
});
toast.present();
}
UI
用户界面
回答by thecrusader
I did find a work around by using setMessage method. Initially message will be empty and when user has not entered any value the validation message will be filled up on click. Find the code snippet below
我确实通过使用 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
}
}
}
]
});
You can override the font of message in variable.scss file as below
您可以在 variable.scss 文件中覆盖消息的字体，如下所示
$alert-md-message-text-color:red;
回答by Milap Shah
You can validate Email by using REGX.
您可以使用 REGX 验证电子邮件。
here is sample. just replace this function with yours.
这是示例。只需用您的功能替换此功能即可。
validateEmail(data) {
if( /(.+)@(.+){2,}\.(.+){2,}/.test(data.email) ){
return {
isValid: true,
message: ''
};
} else {
return {
isValid: false,
message: 'Email address is required'
}
}
}
i hope this will help someone.
我希望这会帮助某人。
