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

【问题标题】：How to use Kendo UI validator to validate inputs within an AngularJS component inside of a form如何使用 Kendo UI 验证器来验证表单内 AngularJS 组件中的输入
【发布时间】：2018-10-08 17:24:42
【问题描述】：

假设我有一个 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

在这种情况下，我想我必须调用 validator.validate 来验证 Quest 和最喜欢的颜色，但我必须为 Name Input 组件中的两个输入调用两次 validator.validateInput。

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

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

【问题讨论】：

标签： angularjs kendo-ui

【解决方案1】：

在我的例子中，为每个输入赋予 name 属性就可以了。

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

Working example

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

【讨论】：