angluar 表单的验证 动态数据项表单验证

Posted ycici

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angluar 表单的验证 动态数据项表单验证相关的知识,希望对你有一定的参考价值。

1.动态生成的表单的验证

 注意:代码中的“from”为form标签的name属性的名称 ,如:  <form name="form" ></form>另,代码中需要注意的点

1.input框的name属性:name="{{‘PlanTitle‘+$index}}"

2.如果使用ng-message,form[‘PlanTitle‘+$index]

3.如果是使用ng-style:form[‘PlanTitle‘+$index].$error.required,$error后面要加上required,不然会出现意想不到的一些有趣的现象(ng-message的则不用)

 

                                    <tr class="text-center" ng-repeat="p in model.CollectPayPlanList track by $index"
<td ng-bind="$index+1"></td> <td> <input name="{{‘PlanTitle‘+$index}}" class="form-control text-box single-line" type="text" required ng-model="p.PlanTitle" ng-style="{‘border-color‘:((form[‘PlanTitle‘+$index].$dirty || form.$submitted) && form[‘PlanTitle‘+$index].$error.required)?‘red‘:‘‘}"/> <!--ng-style="{‘border-color‘:((form[‘PlanTitle‘+$index].$dirty || form.$submitted) && form[‘PlanTitle‘+$index].$error)?‘red‘:‘‘}"--> <!--<span ng-messages="(form[‘PlanTitle‘+$index].$dirty || form.$submitted) && form[‘PlanTitle‘+$index].$error" class="help-block red"> <span ng-message="required">请填写款项名称</span> </span>--> </td></tr>

 

扩展

1.使用ngMessages验证表单

注意:

 

                            <div class="col-xs-10">
                                <input name="Title" class="form-control text-box single-line" required type="text" ng-model="model.Title" maxlength="50" autocomplete="off" />
                                <div ng-messages="(form.Title.$dirty || form.$submitted) && form.Title.$error" class="help-block red">
                                    <p ng-message="required">为空</p>
                                    <p ng-message="minlength">长度最小错误</p>
                                    <p ng-message="maxlength">长度最大错误</p>
                                </div>
                            </div>

 

 

2.必填项加亮显示

如:加亮边框,突出显示

 

 <input name="PlanTitle" class="form-control text-box single-line" type="text" required ng-model="p.PlanTitle" ng-style="{‘border-color‘:((form[PlanTitle].$dirty || form.$submitted) && form[PlanTitle].$error.required)?‘red‘:‘‘}"/>

 

3.

 

以上是关于angluar 表单的验证 动态数据项表单验证的主要内容,如果未能解决你的问题,请参考以下文章

Laravel 验证动态表单输入数据?

element处理动态数据循环的表单验证

如何给动态添加的form表单控件添加表单验证

使用自定义验证和动态值的 Angular 表单

如何在 devexpress 中向表单字段添加动态验证规则

[elementUI]v-for动态数据循环表单验证的处理方式