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

Posted 2020-11-24 ycici

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.