时间戳

首页 > 解决方案 > 如何使用 Kendo UI 验证器来验证表单内 AngularJS 组件中的输入

angularjs - 如何使用 Kendo UI 验证器来验证表单内 AngularJS 组件中的输入

问题描述

假设我有一个 AngularJS 组件，它为用户呈现输入以输入他们的名字和姓氏，如下所示：

First name: <input ng-model="ctrl.firstName" required /><br />
Last name: <input ng-model="ctrl.lastName" required />

假设该组件称为“名称输入”，我将其用作另一种形式的一部分，如下所示：

<form kendo-validator="ctrl.validator">
    <name-input></name-input><br />
    Quest: <input ng-model="ctrl.quest" required /><br />
    Favorite Color: <input ng-model="ctrl.favoriteColor" required
</form>

结果是一个包含四个输入的表单：名字、姓氏、任务和最喜欢的颜色。

但是，当我调用 时validator.validate，我看到只有 Quest 和 Favorite Color 得到验证。我试图为 Name Input 组件声明一个 Kendo UI 验证器，但它不起作用。在运行时，名称输入组件内声明的验证器是未定义的。

我遇到的唯一似乎合理的解决方案是validator.validateInput在每个输入上使用，如下所述：https ://www.newventuresoftware.com/blog/code-bites-validate-any-dom-element-with-kendoui-验证器

在这种情况下，我认为我必须调用validator.validate以验证 Quest 和 Favorite Color，但我必须为validator.validateInputName Input 组件内的两个输入调用两次。

这似乎可以工作，但它非常不干燥。问题是，如果我validator.validateInput以十种不同的形式使用这个名称输入组件，然后在将来，我在名称输入中添加一个“中间名”输入，那么我必须返回并在validator.validateInput任何地方添加一个额外的调用我们使用了名称输入组件。

点他的更好的方法是什么？

标签： angularjskendo-ui

解决方案

在我的情况下，为每个输入提供name属性就可以了。

First name: <input name="firstName" ng-model="ctrl.firstName" required /><br />
Last name: <input name="lastName" ng-model="ctrl.lastName" required />

工作示例

如果组件在同一个表单中重复使用，只需将名称作为绑定数据传递给组件。 工作示例

推荐阅读