如何为动态生成的表单字段实现表单验证答案

【问题标题】：How to implement form validations for Dynamically generated Form fields如何为动态生成的表单字段实现表单验证
【发布时间】：2017-11-08 09:29:24
【问题描述】：

我的 Angular 应用程序中有一个页面，其中所有表单字段都是根据来自后端的数据动态创建的。

                <div class="col-md-12">
                    <form class="form-inline" name="reportsForm">
                        <div class="form-group form-group-grid" ng-repeat="fields in selectedTabData.requiredField" ng-switch="fields.paramType">
                            <label>{{fields.paramName}}<span class="asterisk" ng-if="fields.mandatory==true">*</span></label>
                            <input type="number" class="form-control" ng-switch-when="Number" ng-model="fields.fieldValue" ng-required="fields.mandatory">
                            <input type="date" data-date-format="mm/DD/YYYY" class="form-control" ng-switch-when="DatePicker" ng-model="fields.fieldValue" ng-required="fields.mandatory">
                            <input type="text" class="form-control" ng-switch-when="Text" ng-model="fields.fieldValue" ng-required="fields.mandatory">
                            <select type="date" class="form-control" ng-switch-when="DropDown" ng-options="field.paramKey as field.paramValue for field in fields.paramData" ng-model="fields.fieldValue" ng-required="fields.mandatory">
                            </select>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary form-inline-grid-button" ng-click="getReport()">Run Report</button>
                        </div>
                    </form>
                    <span  style="color:red">Please enter all the required fields marked with (*)</span>
                </div>

如果表单中的任何必填字段为空，我需要显示验证错误消息。

来自后端的表单字段数据分配在$scope.selectedTabData.requiredField

$scope.selectedTabData.requiredField.forEach(function(item)
        {
            if(item.paramType == "DatePicker")
            {
                var date = new Date(item.fieldValue);
                var formattedDate = (date.getMonth() + 1) + '/' + date.getDate() + '/' +  date.getFullYear();
                paramValue.push(formattedDate);
                paramName.push(item.paramName);
            }
            else
            {
                if(item.mandatory == true && item.fieldValue == undefined){
                    //need to set validation as failed
                }else{
                    //need to set validation as passed
                }
                paramValue.push(item.fieldValue);
                paramName.push(item.paramName);
            }
        })

这是我需要检查以验证表单的条件：

if(item.mandatory == true && item.fieldValue == undefined){
                    //need to set validation as failed
                }else{
                    //need to set validation as passed
                }

这是我第一次使用动态字段，在这种情况下谁能帮我实现验证？

谢谢。

【问题讨论】：

标签： javascript angularjs forms validation

【解决方案1】：

所以要解决这个问题，我必须以基本的方式处理这个问题。

我创建了一个作用域变量并将其设置为一个标志。

在 HTML 中：

<div>
<span ng-if="formInvalid" style="color:red">Please fill in all the required fields(*)</span>
</div>

在控制器中：

$scope.formInvalid = false; 

if(item.mandatory == true && item.fieldValue==null)
            {
                $scope.formInvalid = true;
            }

这对我有用。如果您有其他解决方案来处理动态元素中的验证，请添加更多答案。

【讨论】：