Mistu Mistu - 23 days ago 6
AngularJS Question

AngularJS 1 form validation in the loop

i have a problem with angulare code. I have made a small form structure with ng reapet . When i removed one of element every element down of them are not show the "not valid" message . All up of them work fine but down of remove not showing info not given the false of this data-ng-show="Zhf.w{{key}}.$error.pattern" why ng show not taked 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;
}

Answer

I have updated your ng-repeat section to validate form and sample is HERE

 <div ng-app ng-controller="MyController">
<form novalidate="novalidate" name="inputValidate">
    <ul>
        <li ng-repeat="field in fields.test">
          <div ng-form name="validMe">
              <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>
        </li>
    </ul>
</form>