AngularJS 1循环中的表单验证

AngularJS 1 form validation in the loop

本文关键字：表单 验证 循环 AngularJS      更新时间：2023-09-26

我有一个问题与angular代码。我做了一个小的形式结构与ng重复。当我删除一个元素时，它们的每个元素都没有显示"无效"消息。所有的工作都很好，但删除不显示信息没有给出这个data-ng-show="Zhf.w{{key}}.$错误。模式" why ng show not taken false.

<form name="zhf" class="form-horizontal">
  <div data-ng-repeat="(key, i) in vm.items.Info | limitTo: (vm.NumberOfDays)">
    <div class="col-sm-3">
      <input type="text" class="form-control" id="w{{key}}" name="w{{key}}" ng-model="vm.item[key].w" placeholder="0" ng-pattern="/^[0-9]{1,10}([,.][0-9]{1,2})?$/" required>
      <p style="color: #a94442" class="text-danger" data-ng-show="Zhf.w{{key}}.$error.pattern">
        <span>Not a valid number!</span>
      </p>
    </div>
    <div class="col-sm-2">
      <button type="button" class="btn btn-danger btn-sm " ng-click="vm.delete(key)">remove</button>
    </div>
  </div>
</form>
 vm.delete = function(index) {
  vm.items.Info.splice(index, 1);
  vm.item.splice(index, 1);
  vm.NumberOfDays -= 1;
}

我已经更新了你的ng-repeat部分来验证表单和示例HERE

     <form novalidate="novalidate" name="inputValidate">
        <div ng-repeat="field in fields.test">
        <div style="width:600px">
          <div ng-form name="validMe" style="width:58%;float:left">
              <input id="input{{$index}}" name="input{{$index}}" type="text" ng-model="field.value" ng-pattern="/^[0-9]{1,10}([,.][0-9]{1,2})?$/" required> 
              <span style="color: #a94442" ng-show="validMe['input'{'{$index'}'}'].$error.pattern">Not a valid number!</span>
              <span style="color: #a94442" ng-show="validMe['input'{'{$index'}'}'].$error.required ">Number Required!</span>
          </div>
          <div style="width:20%;float:left">
            <input type="button" value="Remove" ng-click="delete($index)"/>
          </div>
        </div>
        </div>
</form>
相关文章：