I have a form that includes multiple input fields, allowing users to remove them as needed.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.numbers = [1,2,3];
$scope.deleteField = function (number) {
$scope.numbers.splice($scope.numbers.indexOf(number), 1);
}
});
The elements have "required" validation:
<form name="theForm">
<div ng-repeat="number in numbers">
<input type="text" name="number{{$index}}" ng-model="number" required/>
<button ng-click="deleteField(number)">Delete</button>
<span ng-show="theForm.number{{$index}}.$error.required">Number is required</span>
</div>
</form>
While the validation initially works correctly, it becomes unsynchronized after deleting an input field. This results in error messages appearing on incorrect fields or not displaying at all.
For a live example, visit: