var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [
{ value: 'one' },
{ value: 'two' },
{ value: '' }
];
$scope.add = function() {
$scope.items.push({ value: '' });
}
$scope.remove = function(position) {
$scope.items.splice(position, 1);
}
});
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>Form validation with dynamic collection of fields</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="TheForm">
<p>The form is {{ TheForm.$valid && 'valid' || 'invalid' }}.</p>
<p>The fields are required. You can add more fields or remove an existing one. If an invalid field
is removed, the form keeps being invalid <b>even if all remaining fields are valid</b>.
</p>
<div ng-repeat="item in items">
<input type="text" ng-model="item.value" required />
<button type="button" ng-click="remove($index)">Remove this {{ item.value.length && 'valid' || 'invalid' }} item</button>
</div>
<button type="button" ng-click="add()">One more value</button>
</form>
</body>
</html>
/* CSS goes here */
input.ng-invalid {
background-color: rgb(255, 200, 200);
}