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

时间:2015-01-27 13:43:00

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

有一天,我忙于获取表单验证,以便在生成的字段上使用新的ng-messages但没有成功。我读了角度文档和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看起来应该是......但是编译它不同意角度,角度不会抛出任何错误,但它只是拒绝将动态字段正确绑定到表单。它更新了底层对象但没有进行表单验证,更不用说触发ng-messages了,根据这篇文章:Angularjs: Form validation on input field generated by directive我没有理由不这样做。这是一个插件:http://plnkr.co/edit/ZzC4jS9M9Ev5i6gxUVxB?p=preview

感谢任何帮助...

1 个答案:

答案 0 :(得分: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了解详情。关于这个问题。

相关问题