[英]How to implement a client registration form providing additional dynamically-generated fields using jQuery and Asp.Net MVC 3?
[英]How to implement form validations for Dynamically generated Form fields
我在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
}
這是我第一次使用動態字段,在這種情況下,有人可以幫助我實現驗證嗎?
謝謝。
因此,要解決此問題,我必須使用基本方法進行處理。
我創建了一個范圍變量並將其設置為一個標志。
在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;
}
這為我解決了。 如果您有替代解決方案來處理動態元素中的驗證,請添加更多答案。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.