AngularJS 1 循环中的表单验证

Posted 2023-05-09

【中文标题】AngularJS 1 循环中的表单验证

【英文标题】：AngularJS 1 form validation in the loop

【发布时间】：2017-04-01 03:32:05

【问题描述】：

我的 angulare 代码有问题。我用 ng reapet 制作了一个小型结构。当我删除其中一个元素时，它们中的每个元素都不会显示“无效”消息。所有这些都工作正常，但删除不显示信息没有给出这个 data-ng-show="Zhf.wkey.$error.pattern" 的错误为什么 ng show not take 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="wkey" name="wkey" 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.wkey.$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;

【参考方案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>

【讨论】：

ye 但问题是当我删除一行时，我的有效消息对于 nex val 是错误的，我认为 taht 错误保存了值。确实，这看起来更好，但是删除呢

这意味着您需要从数组中删除项目并且还需要显示错误消息？ jsfiddle.net/x1dva925/5 像这样，或者即使从数组中删除项目后您仍想显示错误消息？可以给我样品吗？

不，我不会像你那样做 0[ 输入值：aaa]

我已经根据你的输入更新了我的答案请检查 JSfiddle