我有一个使用ng-repeat
创建输入字段的表。我使用ng-message
为表中的每个元素添加了验证。以下是我的代码示例:
<form name="creditForm" novalidate>
<table class="table">
<thead>
<tr>
<th>
<div class="form-group">
Score Value
</div>
</th>
<th colspan="2">
<div class="col-md-6" ng-show="showEdit1">
<div class="form-group">
<input type="text" class="form-control" name="employment_status"
ng-model="scoreValue1"
ng-pattern="/(^(1{0,1}|([0-9][0-9]*))(\.[0-9]{1,4})?$)/">
<div ng-messages="creditForm1.employment_status.$error"
ng-if="creditForm1.employment_status.$dirty">
<div ng-message="pattern">
<span class="error-msgs" ng-cloak>Score must be a numerical value</span>
</div>
</div>
</div>
</div>
<div class="col-md-12" ng-hide="showEdit1">
<div class="form-group" style="width:210px">
@{{scoreValue1}}
</div>
</div>
</th>
</tr>
<tr>
<th>Criteria</th>
<th>
Employment Status
</th>
<th></th>
</tr>
<tr ng-repeat="emp_stat in employment_status">
<ng-form name="test" novalidate>
<td>
<div class="col-md-6" ng-show="showEdit1">
<div class="form-group">
<input type="text" class="form-control"
name="employment_status_criteria"
ng-model="emp_stat.criteria"
ng-pattern="/(^(1{0,1}|([0-9][0-9]*))(\.[0-9]{1,4})?$)/"
required>
<div ng-messages="test.employment_status_criteria.$error"
ng-if="test.employment_status_criteria.$dirty">
<div ng-message="pattern">
<span class="error-msgs" ng-cloak>Criteria must be a numerical value</span>
</div>
<div ng-message="required">
<span class="error-msgs" ng-cloak>Criteria is required</span>
</div>
</div>
</div>
</div>
<div class="col-md-12" ng-hide="showEdit1">
<div class="form-group" style="width:180px">
@{{emp_stat['criteria']}}
</div>
</div>
</td>
<td>
<div class="col-md-6" ng-show="showEdit1">
<div class="form-group">
<input type="text" class="form-control"
name="@{{emp_stat['criteria_name']}}"
value="@{{emp_stat['criteria_name']}}"
ng-model="emp_stat.criteria_name">
</div>
</div>
<div class="col-md-12" ng-hide="showEdit1">
<div class="form-group" style="width:180px">
@{{emp_stat['criteria_name']}}
</div>
</div>
</td>
<td>
<button class="btn btn-danger btn-sm"
ng-click="deleteCriteria1($index, emp_stat.id)">Delete
</button>
</td>
</ng-form>
</tr>
<tr ng-show="addFields1">
<td colspan="3">
<div class="row">
<div class="form-group col-md-12">
<ng-form name="form1" novalidate>
<label> Criteria: </label>
<input type="text" name="criteria1" ng-model="criteria1"
ng-pattern="/(^(1{0,1}|([0-9][0-9]*))(\.[0-9]{1,4})?$)/"
required/>
<div ng-messages="form1.criteria1.$error"
ng-if="form1.criteria1.$dirty">
<div ng-message="pattern">
<span class="error-msgs" ng-cloak>Criteria must be a numerical value</span>
</div>
</div>
<label> Name: </label>
<input type="text" name="criteriaName1" ng-model="criteriaName1"
required/>
<div ng-messages="form1.criteria1.$error"
ng-if="form1.criteria1.$dirty">
<div ng-message="required">
<span class="error-msgs"
ng-cloak>Criteria name required</span>
</div>
</div>
<input type="button" class="btn btn-primary btn-md"
ng-disabled="form1.$invalid" ng-click="addField1()"
value="Add Criteria"/>
</ng-form>
</div>
</div>
</td>
</tr>
<tr class="text-center">
<td colspan="3">
<button class="btn btn-warning btn-sm" ng-click="addNewField1()"
ng-disabled="disable1">Add New Field
</button>
<button class="btn btn-success btn-sm" ng-click="updateCriteria1()"
ng-disabled="creditform.$invalid" ng-show="showEdit1">Update
</button>
<button class="btn btn-info btn-sm" ng-click="cancel1()"
ng-show="showEdit1">Cancel
</button>
<button class="btn btn-success btn-sm" ng-click="editCriteria1()"
ng-hide="showEdit1">Edit
</button>
</td>
</tr>
</thead>
</table>
</form>
我面临的问题是ng-from
指令内的ng-repeat
指令内的验证未显示错误消息。我已经和这个争吵了一两个小时,看不出我做错了什么。