AngularJS - Create dynamic email fields and checking and validation - angularjs

Question

I would like to create a form with several fields: name, last name, ... and add one or several email. The first email field is mandatory. After he should have the possibility to click on "Add email" for adding a new email address. He could add 4 others emails (5 emails in total).
The system should be verify if the format of the email is correct, display a message if necessary and register the data in a DB.
Here my controler "ctrlAddContacts" and module (app.js):
var app=angular.module('ContactsApp', ['ngRoute', 'ui.bootstrap', 'ngDialog']);
app.factory('HttpInterceptor', ['$q', '$rootScope', function($q, $rootScope) {
return {
// On request success
request : function(config) {
// Return the config or wrap it in a promise if blank.
return config || $q.when(config);
},
// On request failure
requestError : function(rejection) {
//console.log(rejection); // Contains the data about the error on the request.
// Return the promise rejection.
return $q.reject(rejection);
},
// On response success
response : function(response) {
//console.log(response); // Contains the data from the response.
// Return the response or promise.
return response || $q.when(response);
},
// On response failure
responseError : function(rejection) {
//console.log(rejection); // Contains the data about the error.
//Check whether the intercept param is set in the config array.
//If the intercept param is missing or set to true, we display a modal containing the error
if (typeof rejection.config.intercept === 'undefined' || rejection.config.intercept)
{
//emitting an event to draw a modal using angular bootstrap
$rootScope.$emit('errorModal', rejection.data);
}
// Return the promise rejection.
return $q.reject(rejection);
}
};
app.controller('ctrlAddContacts', function ($scope, ContactService){
$scope.title="Add a contact";
// Allow to create several fields EMAIL
$scope.emails = [
{
}];
$scope.log = function() {
console.log($scope.emails);
};
$scope.add = function() {
var dataObj = {email:''};
$scope.emails.push(dataObj);
}
$scope.submitForm = function(contact){
if($scope.ContactForm.$valid){
// Send the object to the backend for saving data
ContactService.addNewPerson(contact).success(function(Person){
$scope.ContactForm.$setPristine();
$scope.contact= Person;
});
}
}
});
Here my factory (appService.js)
app.factory('ContactService', function($http){
var factory={};
factory.addNewPerson=function(objContact){
//alert(objContact);
return $http.get('http://myapp/contacts.cfc?method=addNewPerson&jsStruct=' + JSON.stringify(objContact))
};
return factory;
})
The function in the backend (server) retrieves the parameter objContact sent by the backend and executes correctly the query (it's working)
Here my view (manageContact.html)
<h3>{{title}}</h3>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">Person Sheet</div>
</div>
<div class="panel-body">
<form name="ContactForm" class="form-horizontal" role="form" novalidate ng-submit="submitForm(contact)">
<div class="form-group">
<label for="txtLastName" class="col-sm-2 control-label">Last Name *</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="txtLastName" maxlength="100" placeholder="Enter Last Name" required ng-model="contact.LASTNAME">
</div>
</div>
<div class="form-group">
<label for="txtPhone" class="col-sm-2 control-label">Phone Number</label>
<div class="col-sm-10">
<input type="number" class="form-control" name="txtPhone" maxlength="20" placeholder="Enter phone" ng-model="contact.PHONENUMBER">
</div>
</div>
<!---------------- FOR ADDING EMAILS FIELDS ------------ START --->
<div>
<div ng-repeat="email in emails">
<div class="form-group">
<label for="txtEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" name="txtEmail_" maxlength="100" placeholder="Enter Email" ng-model="contact.EMAIL">
</div>
</div>
</div>
<button ng-click="add()">Add Email</button>
</div>
<!---------------- FOR ADDING EMAILS FIELDS ------------ END--->
<div class="error-container"
ng-show="ContactForm.txtEmail.$dirty && ContactForm.txtEmail.$invalid">
<small class="error"
ng-show="ContactForm.txtEmail.$error.required">
Your email is required.
</small>
<small class="error"
ng-show="ContactForm.txtEmail.$error.minlength">
Your email is required to be at least 3 characters
</small>
<small class="error"
ng-show="ContactForm.txtEmail.$error.email">
That is not a valid email. Please input a valid email.
</small>
<small class="error"
ng-show="ContactForm.txtEmail.$error.maxlength">
Your email cannot be longer than 20 characters
</small>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-primary" value="Submit" ng-disabled="ContactForm.$invalid">
Cancel
</div>
</div>
</form>
</div>
</div>
Could you please help me for doing the difference in the name of the 5 fields: txtEmail_1, txtEmail_2 in the controler and the view (when the new field is created).
Kind Regards,

Answer 1

You could try the following for creating dynamic form element name attributes.
<div class="col-sm-10">
<input type="email" class="form-control"
name="txtEmail_{{$index}}" maxlength="100"
placeholder="Enter Email" ng-model="contact.EMAIL">
</div>
<span ng-show="ContactForm['txtEmail_' + $index].$invalid">Enter a valid email</span>