对表行进行验证

时间:2015-10-19 10:18:18

标签: angularjs

我想对表行进行验证,我是按照以下方式进行的,但它不起作用。 我想在lst。点击保存按钮时应用它。

我有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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

这里可能有问题的一点是按钮超出了ng-repeat的范围。所以它不知道mappingElement。 如果要在每行上单独验证,请在列中添加按钮,
否则你可以在控制器中创建一个函数来迭代formIdMetadataMappingToObjectMap[currentForm.unique_id].mappingElements集合并搜索空值,然后你只需将它添加到按钮ng-disabled="validationFunc()"