对表格行进行验证

我想对表格行进行验证，我按照以下方式进行验证，但它不工作。我想在第一次点击保存按钮时应用它。对表格行进行验证

我有5列，并希望对每列应用验证假设如果任何字段为空我想禁用该按钮。任何人都可以帮忙吗？

<div class="mainDiv" ng-if="currentForm != ''"> 
 
    <table class="mappingTable"> 
 
     <tr> 
 
      <th>#</th> 
 
      <th>CommCare Question</th> 
 
      <th>Data Element</th> 
 
      <th>Category Option Combo</th> 
 
      <th>Frequency/Period</th> 
 
      <th>Facility Identifier</th> 
 
     </tr> 
 
     <tr ng-repeat="mappingElement in formIdMetadataMappingToObjectMap[currentForm.unique_id].mappingElements"> 
 
      <td class="serialNoCell">{{$index+1}}.</td> 
 
      <td title="{{mappingElement.commcareQuestion}}" class="commcareQuestion">{{mappingElement.commcareQuestionDescription}}</td> 
 
      <td class="dhisDe"> <input type="text" 
 
             name="foo" 
 
             class="form-control" 
 

 
             ng-model="mappingElement.dataElement" 
 
             ng-class="{ error: !mappingElement.dataElement }" 
 
             placeholder="{{'please_select_data_element'}}" 
 
             uib-typeahead="dataElement as dataElement.name for dataElement in dataElements | filter:$viewValue | limitTo:20" 
 
             uib-typeahead-focus-first="false" 
 
             uib-typeahead-editable=false 
 
             ng-blur="updateCategoryCombo(this.mappingElement)" 
 
        /></td> 
 
      <td class="dhisCC"><input type="text" 
 
             name="foo" 
 
             class="form-control" 
 
             ng-model="mappingElement.categoryCombo" 
 
             ng-class="{ error: !mappingElement.categoryCombo }" 
 
             placeholder="{{'please_select_categorycombo'}}" 
 
             uib-typeahead="categoryComboOption as categoryComboOption.name for categoryComboOption in categoryComboInputHolder[currentForm.unique_id+mappingElement.commcareQuestion] | filter:$viewValue " 
 
             uib-typeahead-focus-first="false" 
 
             uib-typeahead-editable=false 
 
        /></td> 
 
      <td class="dhisPeriod"><input type="text" 
 
              name="foo" 
 
              class="form-control" 
 
              ng-model="mappingElement.period" 
 
              ng-class="{ error: !mappingElement.period }" 
 
              placeholder="{{'please_select_period'}}" 
 
              uib-typeahead="period as period.name for period in periods | filter:$viewValue | limitTo:20" 
 
              uib-typeahead-focus-first="false" 
 
              uib-typeahead-editable=false 
 
        /></td> 
 
      <td class="dhisOuIdentifier"><input type="checkbox" ng-model="commcareQuestionToOrgUnitIdentifierMap[currentForm.unique_id+mappingElement.commcareQuestion]" ng-click="doOrgUnitUIOperations(this);" ng-disabled="!commcareQuestionToOrgUnitIdentifierMap[currentForm.unique_id+mappingElement.commcareQuestion]&&formIdToIsOrgUnitIdentifierPresentMap[currentForm.unique_id]"></td> 
 
     </tr> 
 
    </table> 
 

 
    <div> 
 
     
 
     <button type="button" ng-disabled="!mappingElement.categoryCombo || !mappingElement.dataElement || !mappingElement.period" ng-click="saveMetadataMapping()">{{'Save'}}</button> 
 
    </div> 
 
</div>

来源

2015-10-19 Marshmellow

一件事，可能是错在这里的是，按钮是NG-repeat的范围之外。所以它不知道mappingElement。如果您需要单独验证每行添加列中的按钮，否则您可以在控制器中创建一个函数来迭代formIdMetadataMappingToObjectMap[currentForm.unique_id].mappingElements集合并搜索空值，然后您可以简单地将其添加到按钮ng-disabled="validationFunc()"。

来源

2015-10-19 10:31:05 koox00

对表格行进行验证

回答

相关问题