我有一个在运行时生成的表单。如果验证失败,我试图更新输入框的类。我正在ng-blur = "chaeckValidation()"
执行验证现在,如果我使用ng-class = "active"
并在控制器中为$scope.active = "has-error-class"
设置变量。
这样做是将表单中所有元素的类更新为error-class css
但我想仅将error-class css
附加到验证失败的元素。
我尝试过但无法取得任何成功。我无法对表单中的任何内容进行硬编码,因为表单是完全动态的,而且我在函数中通过regular expression
执行验证,并希望根据regular expression
失败显示错误消息。 / p>
代码: prop.json
[
{ label : Application Name
cid : uniqueId
typeApex : CURRENCY
fieldPath : application_Name__c
type : NUMBER
value : ''
dbRequired : true
isRequired : false
},
{...similar array of JSON object ...},
{}
]
view.html
<div ng-if="prop.type != 'picklist' && prop.type != 'reference'">
<label for="{{prop.label}}">{{prop.label}}</label>
<input type="{{prop.type}}" id="inputFields{{prop.fieldPath}}" ng-blur="fieldValidation(prop.fieldPath, prop.typeApex, $event)" ng-model-options="{updateOn: 'blur'}"
class="form-control" name="{{prop.fieldPath}}" ng-model="fieldPathValue[prop.fieldPath]"
ng-required="isRequired({{prop.dbRequired}}, {{prop.required}})" ng-class ="active"/>
</div>
控制器
$scope.fieldValidation = function(fieldPath, type, $event) {
console.log('fieldPath in fieldValidation ',fieldPath);
var myMap = new Map();
myMap.set("Term__c","^[0-9]+$");
myMap.set("Loan_Amount__c","[0-9]+(\.[0-9][0-9]?)?");
//console.log("fieldPathValue ",$.parseJSON(JSON.stringify($scope.fieldPathValue)));
//console.log("fieldPathValue ",$scope.fieldPathValue);
var value = $event.target.value;
console.log("value ",value);
var reg = new RegExp(myMap.get(fieldPath));
console.log("regex test result ",reg.test(value));
console.log("event ",$event);
if(!reg.test(value)) {
//add error message classs to selected field
//display error message on top of field
$timeout(function(){
$scope.$apply(function () {
$scope.active = "has-error";
});
}, 0);
}
结果图片:
我在第一个输入字段中输入了一个错误,它接受浮点数并且我提供了字母表,因此它会抛出错误,但错误会传播到整个表单,而不仅仅是触发它的元素。
如何确保只有fails validation on ng-blur
附加错误类-css的元素。
我尝试使用getElementById
执行此操作,但没有成功。添加了下面的问题链接。
我在我的一个问题中对我的问题形式元素进行了更多描述。 DOM elements not getting updated from angular controller