form validation with ng-repeat ( undefined input fields )

dynamic-name.directive.js

(function() {
	'use strict';

	angular
	.module('myApp')
	.directive('dynamicName', dynamicName);
	/** @ngInject */
	function dynamicName($compile) {
		// put name from attribute dynamic-name (input or form tag)
		var directive = {
			restrict: 'A',
			link: function(scope, elem, attrs) {
				elem.attr('name', scope.$eval(attrs.dynamicName));
				elem.removeAttr('dynamic-name');
				$compile(elem)(scope);
			}
		};
		return directive;
	}

})();

index.filters.js

(function() {
	'use strict';

	angular
	.module('engageAdminApp')
	.filter('capitalize', function() {
		return function(input, all) {
			var reg = (all) ? /([^\W_]+[^\s-]*) */g : /([^\W_]+[^\s-]*)/;
			return input ? input.replace(reg, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}) : '';
		};
	})
  .filter('underscoreToReadable', function(){
		return function(input){
			return input ? input.replace(/_/i, ' ') : '';
		};
	});
	
})();

ng-repeat-form.html

<form id="saveForm" name="saveForm" class="form-horizontal" novalidate>
  <!-- render a form-group for each field in collection -->
  <div class="form-group" ng-repeat="field in systemTypes">
  	<label class="col-sm-3 control-label">{{field.name}}</label>
  	<!-- highlight invalid field -->
  	<div class="col-sm-2" ng-class="{'has-error': saveForm['field_' + $index].$invalid }">
	  	<div class="append-icon">
	  		<!-- set sufix to input name (for each field in collection) -->
	  		<input type="text" class="form-control" placeholder="Enter {{field.name}}"
	  			ng-model="field.value"
	  			name="field_{{$index}}"
	  			ng-required="true"
	  			ng-pattern="/[az-A-Z0-9 ]/i"
	  			ng-change="onChangeCost($index)">
	  		<i class="fa fa-plus" aria-hidden="true"></i>
  		</div>
  		<!-- ng-messages -->
  		<div class="" ng-messages="saveForm['field_' + $index].$error"
  			>
  			<div class="text-danger validation-messages" ng-message="required">Field required</div>
  			<div class="text-danger validation-messages" ng-message="pattern">Only alphanumeric values allowed</div>
  		</div>
	</div>
</div>

ng-repeat-multifield-form.html

<div class="panel-body">
		<form name="vm.saveEmailForm" novalidate>
		  <!-- the form use a collapsible panel for each form block -->
			<div class="panel panel-default" ng-repeat="item in vm.collectionOfForms">
				<div class="panel-heading">
					<span class="panel-title h3 text-primary text-uppercase">
						<a href="javascript:void(0);" tabindex="0" class="accordion-toggle" ng-click="vm.openItem(item, $index)">
							{{item.email_template_label}}
							<i class="pull-right fa" ng-class="{'fa-chevron-down': item.isCollapsed, 'fa-chevron-right': !item.isCollapsed}"></i>
						</a>
					</span>
				</div>
				<div class="panel-collapse collapse" uib-collapse="item.isCollapsed">
					<div class="panel-body">
						<p ng-show="item.email_template_name === 'Interactive_Proposal_Link_v1'">The consultant will send this message from the APP. This email contains the link to the proposal for the customer to review and accept.</p>
						<ng-form name="vm['form_' + item.email_template_name]">
							<div class="form-group" ng-repeat="field in item.attributes" ng-class="{'has-error': vm['form_' + item.email_template_name][item.key].$invalid}">
								<!-- underscoreToReadable filter replace _ by an space -->
								<!-- capitalize filter replace _ by an space -->
								<label for="{{field.key}}">{{field.key|underscoreToReadable|capitalize}}</label>
								<!-- dynamic-name directive replace dynamic-name attr by a name attribute with its value -->
								<textarea class="form-control" rows="3" id="{{field.key}}"
									placeholder="Enter {{field.key}}"
									ng-model="field.value"
									ng-pattern="field.pattern"
									ng-required="field.required"
									dynamic-name="field.key"
								></textarea>

								<div class="" ng-messages="vm['form_' + item.email_template_name][field.key].$error">
									<div class="text-danger validation-messages" ng-message="required">{{field.key|underscoreToReadable|capitalize}} is required</div>
									<div class="text-danger validation-messages" ng-message="pattern">{{field.key|underscoreToReadable|capitalize}} has invalid characters or is to short</div>
								</div>
							</div>

							<div class="container-p-xs">
								<div class="text-center">
									<button type="button" class="btn btn-primary text-uppercase submit"
										ng-click="vm.saveForm(item, $index)"
										ng-disabled="vm['form_' + item.email_template_name].$invalid">Save </button>
								</div>
							</div>
						</ng-form>
					</div>
				</div>
			</div>
		</form>
	</div>