使用弹出框进行 Angularjs 验证

Posted 2023-05-09

【中文标题】使用弹出框进行 Angularjs 验证

【英文标题】：Angularjs validation using popover

【发布时间】：2016-02-20 22:40:24

【问题描述】：

我看到了这个bootstrap popover，我正在尝试在我的项目中使用它。

考虑一个简单的例子。

<input type="number" ng-model="data" step="0.1" />

输入字段的步长为 0.1。我希望用户只输入不超过 10 的值。

如果用户输入超过 10 的任何内容，我希望在顶部显示一个弹出框，说明该值只需要从 0 到 10 的范围内输入。

我怎样才能做到这一点？上面显示的弹出窗口没有任何类似于我正在寻找的示例。有人能解释一下吗？

【问题讨论】：

max="10" ?然后挂钩验证状态更改以触发弹出窗口，因为应该设置class="ng-invalid"。请参阅docs.angularjs.org/guide/forms“自定义验证”部分的文档？

另请参阅docs.angularjs.org/api/ng/directive/ngChange <input ... ng-change="myFunc()"/> 以挂钩您的 jquery 代码以检查 class="..." 内容和/或检查 AngularJS 验证属性，以决定弹出（或删除弹出框）。

【参考方案1】：

您可以调整以编程方式触发的弹出窗口答案（或来自Good way to dynamically open / close a popover (or tooltip) using angular, based on expression? 的任何指令并将其绑定到字段验证

<form name="myForm">
  <input popover="Should be between 1 and 10" name="myInput" ng-model="test"
        popover-toggle="myForm.myInput.$error.max" max="10" type="number" 
        popover-placement="bottom" />
</form>

我使用了来自https://***.com/a/31372487/360067的指令

---

Plnkr - http://plnkr.co/edit/2uk4YM5zinM01ayzZKdd?p=preview

【讨论】：

@potatopeelings- 一个小问题。没有表格我不能拥有它吗？如果我想在没有表格的情况下使用它应该怎么做？

@potatopeelings- 它只接受数字作为输入。一个罕见的情况是它也需要字符'e'。如何排除“e”被接受？ e 是欧拉数，这就是它正在接受它。我怎样才能避免这种情况？

是的，您可以将任何表达式传递给popover-toggle（例如编写您自己的表达式来验证值）。 e 是因为它被视为指数数字 - 一旦您取消表格，您必须编写自己的数字验证，并且您可以排除 e 除了无效的范围值）