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>

这完全是AWFUL，unDRY，我想我做错了。

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

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

非常感谢任何建议。

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

中的扩展数据

Angular：更好的表单验证解决方案

1 个答案: