验证使用ng-repeat,ng-message动态创建的输入时遇到问题

时间:2016-01-18 02:31:09

标签: javascript angularjs

我有一个使用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指令内的验证未显示错误消息。我已经和这个争吵了一两个小时,看不出我做错了什么。

0 个答案:

没有答案