[英]How to implement form validations for Dynamically generated Form fields
I have a page in my Angular application where all form fields are created dynamically based on data coming from backend. 我在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>
I need the validation error message to be shown if anyone of the required field in the form is left empty. 如果表单中必填字段中的任何人为空,我需要显示验证错误消息。
The form fields data coming from backend is assigned in $scope.selectedTabData.requiredField
来自后端的表单字段数据在$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);
}
})
This is the condition I need to check to validate the form : 这是我需要检查以确认表格的条件:
if(item.mandatory == true && item.fieldValue == undefined){
//need to set validation as failed
}else{
//need to set validation as passed
}
This is the first time I am working with dynamic fields, can anyone help me with implementation of validation in this case? 这是我第一次使用动态字段,在这种情况下,有人可以帮助我实现验证吗?
Thanks. 谢谢。
So to fix this, I had to deal with this the basic way. 因此,要解决此问题,我必须使用基本方法进行处理。
I created a scope variable and set it as a flag. 我创建了一个范围变量并将其设置为一个标志。
in HTML : 在HTML中:
<div>
<span ng-if="formInvalid" style="color:red">Please fill in all the required fields(*)</span>
</div>
In Controller : 在控制器中:
$scope.formInvalid = false;
if(item.mandatory == true && item.fieldValue==null)
{
$scope.formInvalid = true;
}
This worked out for me. 这为我解决了。 Please add more answers if you have an alternate solution to handle validations in dynamic elements. 如果您有替代解决方案来处理动态元素中的验证,请添加更多答案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.