动态表单集合验证

问题描述

我们在做前台的时候，会遇到动态表单的问题，就是只有在我们输入或者点击了某些按钮后才会显示新的页面，而当新显示的页面会有多组的时候，验证就成了我们的问题。

例如上图，当我们点击新增参量的时候，会生成下方的参量，而参量1和参量2是相同的表单结构。这时我们要进行表单的验证就会显得有些难度了。

解决方法

在解决这个问题之前，我们需要清楚这组动态表单是怎么生成的。

动态表单的生成

相同的表单结构，又是动态生成的，所以我们肯定要使用ng-repeat来帮助实现。

1
2
3

<div class="p-m" ng-repeat="parameterCategory in data.parameterCategorySet">
...
</div>

但我们点击新增参量的时候，会新生成一个参量，然后添加进parameterCategorySet中。

原来验证方法的问题

上面的代码结构，如果我们还是按照原来的验证方法添加表单校验，就会出现问题。

按照我们原来的方法，以提示信息的验证为例验证如下：

<div class="p-m" ng-repeat="parameterCategory in data.parameterCategorySet">
    <div class="row">
        <div class="col-md-8">
            <div class="form-group">
                <label class="col-sm-4 control-label">提示信息:</label>
                <div class="col-sm-5">
                    <input type="text" ng-model="parameterCategory.tips" class="form-control" name="paramTip" required="true" />
                    <div class="m-t-xs" ng-show="nonMandatoryInstrumentCategoryAddForm.paramTip.$touched && nonMandatoryInstrumentCategoryAddForm.paramTip.$invalid">
                        <span class="text-danger" ng-show="nonMandatoryInstrumentCategoryAddForm.paramTip.$error.required"><i class="fa fa-exclamation-triangle"></i> 提示信息不能为空 </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我们给input输入框一个name属性,然后在表单的数据不合法并且被点击过的时候显示验证信息。这时会出现下面的问题。

当存在两个参量的时候，我使其中一个出现验证信息，对另一个不做任何操作，但是同样的，另一个也出现了验证信息。类似的，当我们将其中一个的提示信息填写后，两个的验证信息都不出现了。

问题原因

出现这个问题的原因是因为本应该不同的两部分表单，使用了相同的name作为标志。就是说我要给小明一个苹果，但是有两个人都叫小明，所以我就给两个小明一人一个苹果了。

最终解决

知道原因后，解决的办法就有了。既然不能使用相同的name属性，那我们使用不同的属性不就行了。

<div class="p-m" ng-repeat="parameterCategory in data.parameterCategorySet">
    <div class="row">
        <div class="col-md-8">
            <div class="form-group">
                <label class="col-sm-4 control-label">提示信息:</label>
                <div class="col-sm-5">
                    <input type="text" ng-model="parameterCategory.tips" class="form-control" name="{{parameterCategory.name}}ParamTip" required="true" />
                    <div class="m-t-xs" ng-show="nonMandatoryInstrumentCategoryAddForm[parameterCategory.name + 'ParamTip'].$touched && nonMandatoryInstrumentCategoryAddForm[parameterCategory.name + 'ParamTip'].$invalid">
                        <span class="text-danger" ng-show="nonMandatoryInstrumentCategoryAddForm[parameterCategory.name + 'ParamTip'].$error.required"><i class="fa fa-exclamation-triangle"></i> 提示信息不能为空 </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>