使用 ng-messages 对生成的字段进行表单验证答案

【问题标题】：Form validation on generated fields with ng-messages使用 ng-messages 对生成的字段进行表单验证
【发布时间】：2015-11-10 06:34:01
【问题描述】：

一天我都在摆弄表单验证以在生成的字段上使用新的 ng-messages，但没有成功。我在 Angular 文档和 github 问题上阅读了 ng-messages 不支持 ng-repeat，因为它不插入其字段。所以，我决定去 jquery 路线自己构建 dom 编译它并用我生成的代码替换元素，当然我也没有开始工作。所以一些帮助将不胜感激。这是我的html：

....
    <app-field ng-repeat="field in fields" field="field" ng-model="selected[field.name]" form="form" type="input"></app-field>

    <fieldset class="form-group">
        <label for="field1s">static field 1</label>
        <input name="field1s" type="text" ng-model="selected['field1']" class="form-control" required="">
        <ng-messages for="form['field1'].$error">
            <ng-message when="required">Is required</ng-message>
        </ng-messages>
        <label for="field2s">static field 2</label>
        <input name="field2s" type="text" ng-model="selected.field2" class="form-control" required="" ng-maxlength="10" ng-minlength="2">
        <ng-messages for="form.field2s.$error">
            <ng-message when="required">Is required</ng-message>
            <ng-message when="maxlength">Max length 10</ng-message>
            <ng-message when="minlength">MIn length 2</ng-message>
        </ng-messages>
    </fieldset>

我还添加了一些静态类型字段，以便我可以监控数据源和表单。指令 app-field 生成的 dom 是用一些 jquery 汤煮熟的，但结果证明它工作得很好。我的意思是生成的 dom 看起来应该是这样，但是......但编译后它与 angular 不一致，angular 不会引发任何错误，但它只是拒绝将动态字段正确绑定到表单。它更新了底层对象，但不进行表单验证，更不用说触发 ng-messages 了，根据这篇文章：Angularjs: Form validation on input field generated by directive 我看不出它不应该这样做的理由。这是一个笨蛋：http://plnkr.co/edit/ZzC4jS9M9Ev5i6gxUVxB?p=preview

感谢任何帮助...

【问题讨论】：

不是一个真正的解决方案，但根据推特上的@yearofmoo，“随着 Angular 1.4（可能是 1.3）的下一个版本，您将能够让 ngMessages 通过 ngRepeat 呈现服务器端错误。更多细节很快就会。”

标签： javascript angularjs validation angularjs-directive angularjs-scope

【解决方案1】：

您需要在每个 ng-repeat 中包含 ng-form 元素才能使动态字段验证正常工作。我已经解决了下面字段 1 的问题。 http://plnkr.co/edit/xQTLDa3TptXky8KIcSsh?p=preview

<form name="form">

<ng-form name="myform">
    <input name="field1s" type="text" ng-model="selected['field1']" class="form-control" ng-required="true" ng-pattern="/^[0-9a-zA-Z]+$/">
            <ng-messages for="form.myform['field1s'].$error">
                <ng-message when="required">Is required</ng-message>
                <ng-message when="pattern">alpha error </ng-message>
            </ng-messages>
</ng-form>

</form>

我已经注释掉了您编写的自定义 JQuery 代码。因为它不再需要了。

请参阅此 - https://github.com/angular/angular.js/issues/10165 了解更多信息。关于这个问题。

【讨论】：