I have a form in order to add / update one or several emails. The first email field is mandatory. After filling the field it's possible to click on "Add email" for adding a new email address. By this way it's possible to add 4 others emails (5 emails in total).
The system can verify if the format of the email is correct and display a message if necessary and register the data in a DB.
Here my view (manageContact.html)
<h3>{{title}}</h3>
<div class="panel panel-default" ng-show="authorRole==1">
<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)">
<!---------------- FOR UPDATING EMAILS FIELDS ------------ START --->
<div ng-repeat="(key, email) in emails | limitTo : 5" style="z-index:6">
<div class="form-group">
<span ng-switch="$index">
<label ng-switch-when="0" for="txtEmail" class="col-sm-2 control-label">Main email</label>
<label ng-switch-default for="txtEmail" class="col-sm-2 control-label">Email {{$index+1}}</label>
</span>
<div class="col-sm-9" ng-switch="$index">
<input ng-switch-when="0" type="email" class="form-control"
name="txtEmail_{{$index}}" maxlength="100" placeholder="Enter main email"
ng-model="contact.EMAIL">
<input ng-switch-default type="email" class="form-control"
name="txtEmail_{{$index}}" maxlength="100" placeholder="Enter Email {{$index+1}}"
ng-model="contact['EMAIL_'+$index]">
<div class="error-container"
ng-show="ContactForm['txtEmail_' + $index].$dirty && ContactForm['txtEmail_' + $index].$invalid">
<div ng-show="ContactForm['txtEmail_' + $index].$error.email" class="alert alert-info" role="alert" style="margin-top:10px;">
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
That is not a valid email. Please input a valid email.
</div>
<div ng-show="ContactForm['txtEmail_' + $index].$error.required" class="alert alert-info" role="alert" style="margin-top:10px;">
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Your email is required.
</div>
<div ng-show="ContactForm['txtEmail_' + $index].$error.minlength" class="alert alert-info" role="alert" style="margin-top:10px;">
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Your email is required to be at least 3 characters
</div>
<div ng-show="ContactForm['txtEmail_' + $index].$error.maxlength" class="alert alert-info" role="alert" style="margin-top:10px;">
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Your email cannot be longer than 20 characters
</div>
</div>
</div>
<div class="col-sm-1" ng-show="$index == 0">
<a href="" ng-click="add()" ng-show="emails.length<5" class="inline btn btn-primary icon_email">
<span class="glyphicon glyphicon-plus icon2"></span><span class="addButton">Add email</span>
</a>
</div>
</div>
</div>
<!---------------- FOR UPDATING EMAILS FIELDS ------------ END --->
</form>
</div>
</div>
For adding a contact all is working and the emails are correctly registered. For updating a contact I have a problem with the contact's emails. In order to see all emails registered of the contact, it's necessary with my current script to click on the button "Add email" each time that an email is registered for seeing data. I would like to display the emails if they exist in the DB - so display each time the row (field + data). If it doesn't exist it's necessary to click on the button for adding an new email.
Could you please help me to update this code for doing that because I cannot do that directly in ng-switch?
Here my controlers "ctrlEditContacts" and module (app.js):
var app=angular.module('ContactsApp', ['ngRoute', 'ui.bootstrap', 'ngDialog']);
app.factory('HttpInterceptor', ['$q', '$rootScope', function($q, $rootScope) {
return {
......
}
};
app.config(function($routeProvider, $httpProvider, ngDialogProvider){
$httpProvider.defaults.cache = false;
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
$httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
$routeProvider.when('/add-contacts',
{
templateUrl: 'template/manageContact.html',
controller: 'ctrlAddContacts'
})
.when('/edit-contacts/:contactId',
{
templateUrl: 'template/manageContact.html',
controller: 'ctrlEditContacts'
})
.otherwise({redirectTo:'/all-requests'});
});
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;
});
}
}
});
app.controller('ctrlEditContacts', function ($scope, $routeParams, MyTextSearch, ContactService, ngDialog, $timeout){
//FOR ALLOWING SEVERAL EMAILS
$scope.emails = [
{
}];
$scope.log = function() {
console.log($scope.emails);
};
$scope.add = function() {
var dataObj = {email:''};
$scope.emails.push(dataObj);
}
$scope.contact={};
if($routeParams.contactId){
$scope.title="Edit the contact";
}
ContactService.loadPersonById($routeParams.contactId).success(function(contact){
$scope.contact.ID = contact[0].ID;
$scope.contact.EMAIL = contact[0].EMAIL;
$scope.contact.EMAIL_1 = contact[0].EMAIL_1;
$scope.contact.EMAIL_2 = contact[0].EMAIL_2;
$scope.contact.EMAIL_3 = contact[0].EMAIL_3;
$scope.contact.EMAIL_4 = contact[0].EMAIL_4;
})
.error(function (data, status, header, config) {
console.log("Query loadPersonById ERROR");
console.log("status:" + status);
if (status==302) {
alert("Session expired - New Authentication requested");
}
}).finally(function() {
});
$scope.submitForm = function(contact){
if($scope.ContactForm.$valid){
ContactService.updatePerson(contact, $routeParams.contactId).success(function(){
alert('Person updated successfully');
})
.error(function (data, status, header, config) {
})
.finally(function() {
});
}
};
});
Here my factory (appService.js)
app.factory('ContactService', function($http){
var factory={};
factory.addNewPerson=function(objContact){
return $http.get('http://myapp/contacts.cfc?method=addNewPerson&jsStruct=' + JSON.stringify(objContact))
};
factory.updatePerson=function(objContact,id){
var params = {
method: "updatePerson",
contactid: id,
jsStruct: objContact
};
var config = { params: params };
return $http.get('http://myapp/contacts.cfc', config)
};
return factory;
})
If you have a best solution than ng-switch for doing that, please tell me.
Thank you in advance for your help.
I updated the controller:
app.controller('ctrlEditContacts', function ($scope, $routeParams, ContactService, ngDialog, $timeout){
//FOR ALLOWING SEVERAL EMAILS
$scope.emails = [];
$scope.log = function() {
console.log($scope.emails);
};
$scope.add = function() {
var dataObj = {email:''};
$scope.emails.push({});
};
$scope.contact={};
if($routeParams.contactId){
$scope.title="Edit the contact";
$scope.edit_oldContact = "true";
}
ContactService.loadPersonById($routeParams.contactId).success(function(contact){
console.log("Query loadPersonById OK");
$scope.contact.ID = contact[0].ID;
$scope.contact.EMAIL = contact[0].EMAIL;
$scope.contact.EMAIL_1 = contact[0].EMAIL_1;
$scope.contact.EMAIL_2 = contact[0].EMAIL_2;
$scope.contact.EMAIL_3 = contact[0].EMAIL_3;
$scope.contact.EMAIL_4 = contact[0].EMAIL_4;
// GET the emails already registered for displaying in the contact edit form
if($scope.contact.EMAIL.length > 0) {
$scope.emails.push($scope.contact.EMAIL);
}
if($scope.contact.EMAIL_1.length > 0) {
$scope.emails.push($scope.contact.EMAIL_1);
}
if($scope.contact.EMAIL_2.length > 0) {
$scope.emails.push($scope.contact.EMAIL_2);
}
if($scope.contact.EMAIL_3.length > 0) {
$scope.emails.push($scope.contact.EMAIL_3);
}
if($scope.contact.EMAIL_4.length > 0) {
$scope.emails.push($scope.contact.EMAIL_4);
}
})
.error(function (data, status, header, config) {
console.log("Query loadPersonById ERROR");
console.log("status:" + status);
}).finally(function() {
console.log("Query loadPersonById Finalized");
});
$scope.submitForm = function(contact){
//console.log(contact);
};
});
And The template:
<!---------------- FOR UPDATING EMAILS FIELDS ------------ START --->
<div ng-repeat="(key, email) in emails | limitTo : 5" style="z-index:6">
<div class="form-group">
<span ng-switch="$index">
<label ng-switch-when="0" for="txtEmail" class="col-sm-2 control-label">Main email</label>
<label ng-switch-default for="txtEmail" class="col-sm-2 control-label">Email {{$index+1}}</label>
</span>
<div class="col-sm-9" ng-switch="$index">
<input ng-switch-when="0" type="email" class="form-control"
name="txtEmail_{{$index}}" maxlength="100" placeholder="Enter main email"
ng-model="contact.EMAIL">
<input ng-switch-default type="email" class="form-control"
name="txtEmail_{{$index}}" maxlength="100" placeholder="Enter Email {{$index+1}}"
ng-model="contact['EMAIL_'+$index]">
<div ng-show="ContactForm['txtEmail_' + $index].$dirty && ContactForm['txtEmail_' + $index].$error.emailExists" class="alert alert-info" role="alert" style="margin-top:10px;">
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
This email is already used
<ul id="contacts_list">
<li ng-repeat=" cont in ContactForm['txtEmail_' + $index].persons" style="position:relative; z-index:1">
<div angular-popover direction="right" template-url="template/popover.html" mode="mouseover">
<a href="#/view-contacts/{{cont.id}}">{{ cont.lastname }} {{ cont.firsttname }}</a>
</div>
</li>
</ul>
</div>
<div ng-if="ContactForm['txtEmail_' + $index].$pending.emailExists">checking....</div>
<div class="error-container"
ng-show="ContactForm['txtEmail_' + $index].$dirty && ContactForm['txtEmail_' + $index].$invalid">
<div ng-show="ContactForm['txtEmail_' + $index].$error.email" class="alert alert-info" role="alert" style="margin-top:10px;">
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
That is not a valid email. Please input a valid email.
</div>
<div ng-show="ContactForm['txtEmail_' + $index].$error.required" class="alert alert-info" role="alert" style="margin-top:10px;">
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Your email is required.
</div>
</div>
</div>
<div class="col-sm-1" ng-show="$index == emails.length - 1">
<a href="" ng-click="add()" ng-show="emails.length<5" class="inline btn btn-primary icon_email">
<span class="glyphicon glyphicon-plus icon2"></span><span class="addButton">Add</span>
</a>
</div>
</div>
</div>
<!---------------- FOR UPDATING EMAILS FIELDS ------------ END --->