Question

假设我有一个AngularJS组件，该组件呈现输入，以便用户输入其姓氏和名字，如下所示：

<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

结果是具有四个输入的表单：名，姓，任务和收藏夹颜色。

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

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

在这种情况下，我认为我必须调用validator.validateInput来验证“任务”和“收藏夹颜色”，但是对于“名称输入”组件中的两个输入，我必须调用两次validator.validateInput。

这似乎可行，但它非常干燥。问题是，如果我以十种使用此名称输入组件的不同形式使用validator.validateInput，然后将来在名称输入中添加“中间名称”输入，那么我必须返回并添加一个我在使用“名称输入”组件的任何地方都进行了额外的uses-sdk:minSdkVersion 15 cannot be smaller than version 16调用。

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

Answer 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

如何使用Kendo UI验证程序来验证表单内AngularJS组件中的输入

1 个答案: