Angularjs 角度：更好的表单验证解决方案

需要关于表单验证的建议

我有这样的控制结构：

<form name="myForm">
    <control-wrap>
        <label isRequired="myForm.field1">Some text here</label>
        <custom-control name="field1" 
                  ng-required="true"
                  ng-something-else="any"
                  ng-model="modelForm.field1"></custom-control>
        <info>Some data after control</info>
        <error-list field="myForm.field1"></error-list>
    </control-wrap>

    <control-wrap>
        <label isRequired="myForm.field2">Some text here</label>
        <custom-control name="field2" 
                  ng-required="true"
                  ng-something-else="any"
                  ng-model="modelForm.field2"></custom-control>
        <info>Some data after control</info>
        <error-list field="myForm.field2"></error-list>
    </control-wrap>

    <control-wrap>
        <label isRequired="myForm.field3">Some text here</label>
        <custom-control name="field3" 
                  ng-required="true"
                  ng-something-else="any"
                  ng-model="modelForm.field3"></custom-control>
        <info>Some data after control</info>
        <error-list field="myForm.field3"></error-list>
    </control-wrap>
</form>

这里有一些文字
控制后的一些数据
这里有一些文字
控制后的一些数据
这里有一些文字
控制后的一些数据

这太糟糕了，我想我做错了什么

我想停止使用字段名，但我不知道如何以正确的方式将ngModel传递给同级（现在我被迫通过属性将ngModel传递给isRequired和error list）

对me ofc来说，最好的解决方案是要求：“需要和错误列表中的“^ngModel”

任何建议都将不胜感激

---

p.S.我无法在json对象中存储字段，字段之间有很多逻辑，标签和提示上有很多不同的调整。

好吧，我想到了这个解决方案：

也许这不是最好的解决方案，但我不再需要名字了

其主要思想是将模型引用设置为父容器，并从其他子容器中查看此引用

所以最后我有：

    <control-wrap>
        <label link-required>Field1 label:</label>
        <input link-to-wrap ng-model="mc.field1" 
            type="text" 
            ng-required="true" 
            ng-minlength="5" 
            ng-maxlength="10" />
        <errors-list></errors-list>
    </control-wrap>

字段1标签：

更新

关于使用模型存储验证规则的更多想法：

---

新指令

my rules

和

controller.js

中的扩展数据可能需要smth，比如：为所有控件创建一个指令，通过ng重复该指令来填充表单，而不是在其模板中执行所有必要的逻辑验证？！另一个问题是，我不能用ng repeat。不幸的是，我喜欢这样；如果您还需要模型验证，即在代码中而不是在视图中定义验证约束-另外，由于能够以编程方式调用验证，您可能需要查看.Thx@NikosParaskevopoulos，但我的案例仅适用于反用例。：）我的表单对于第三方库来说太简单了。在我的示例中，我只是展示了一种将字段绑定到验证错误点的方法。在真正的解决方案中，我想您确实应该在JSON中存储一些验证规则，以及相关的消息，可能是一些i18n服务。根据您的评论更新了Plunker:）看起来它非常适合“简单表单”的情况！查看代码的注释：

myRules

可能需要

ngModel

并为每个案例添加

$validators

。通过这种方式，您的设置变得更具可扩展性—您可以通过实现验证功能而不是指令来添加新的验证程序。再说一次，这对于您想要的是次要的（并且您必须重新实现Angular的标准验证器）。我还建议您接受您的答案，这样人们将来就会知道这个问题的状态（并且可能会更有帮助）。