繁体   English   中英

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

[英]Form validation on generated fields with ng-messages

有一天,我花了很多时间在表单验证上,无法在生成的字段上使用新的ng消息。 我阅读了有角度的文档,在github问题上,ng-repeat不被ng-messages支持,因为它不会插值其字段。 因此,我决定走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:由指令生成的输入字段上的表单验证我看不出为什么不应该这样做。 这是一个小问题: http ://plnkr.co/edit/ZzC4jS9M9Ev5i6gxUVxB? p= preview

任何帮助表示赞赏...

您必须在每个ng-repeat中都包含ng-form元素,动态字段验证才能正常工作。 我在下面plunker固定的问题进行实地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了解更多信息。 关于这个问题。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM