角:更好的形式验证解决方案

Question

需要有关表单验证的建议。

我有这样的控制结构：

<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>

这是完全可怕的，unDRY和我想我做了一些非常错误的事情。

我想停止使用字段名，但我不知道如何以正确的方式将ngModel传递给兄弟(现在我被迫通过属性将ngModel传递给isRequired和错误列表)。

对我来说，ofc最好的解决方案是要求： '^ngModel‘来自isRequired和错误列表。

如有任何建议，将不胜感激。

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

Answer 1

嗯，我想出了一个解决方案：https://plnkr.co/edit/mPXpEaZs2uWZb3WRkmgp?p=preview

也许这不是最好的解决办法，但我不再需要名字了。

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

所以最后我有：

    <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>

更新

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

https://plnkr.co/edit/6ZVv685oSRDt7ELBKb9z?p=preview

新指令my-rules与controller.js中的扩展数据