如何使用Kendo验证器验证表单中的AngularJS组件中的输入

Question

假设我有一个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和最喜欢的颜色才会得到验证。我试图为名称输入组件声明一个Kendo验证器，但它不起作用。在运行时，未定义在名称输入组件中声明的验证器。

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

在这种情况下，我想我必须调用validator.validate来验证Quest和热门颜色，但是对于Name输入组件中的两个输入，我必须调用validator.validateInput两次。

这看起来很管用，但它很不干燥。问题是，如果我以十种不同的形式使用这个名称输入组件的validator.validateInput，然后在将来，我在名称输入中添加一个“中间名”输入，那么我必须回到使用名称输入组件的任何地方，添加一个额外的validator.validateInput调用。

有什么更好的方法来点缀他的？

Answer 1

在我的例子中，给每个输入赋予name属性就可以做到这一点。

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

工作实例

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