在执行中更改当前元素的ng-class

时间:2016-10-06 14:27:57

标签: javascript css angularjs ng-class

我有一个在运行时生成的表单。如果验证失败,我试图更新输入框的类。我正在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);

  }

结果图片:

enter image description here

我在第一个输入字段中输入了一个错误,它接受浮点数并且我提供了字母表,因此它会抛出错误,但错误会传播到整个表单,而不仅仅是触发它的元素。

如何确保只有fails validation on ng-blur附加错误类-css的元素。

我尝试使用getElementById执行此操作,但没有成功。添加了下面的问题链接。

我在我的一个问题中对我的问题形式元素进行了更多描述。 DOM elements not getting updated from angular controller

0 个答案:

没有答案