AngularJs Adding Form Fields Dynamically and identification in the scope

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 "ctrlEditContacts" and module (app.js):

var app=angular.module('ContactsApp', ['ngRoute', 'ui.bootstrap', 'ngDialog']);

// register the interceptor as a service
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.config(function($routeProvider, $httpProvider, ngDialogProvider){
    $httpProvider.defaults.cache = false;
    if (!$httpProvider.defaults.headers.get) {
        $httpProvider.defaults.headers.get = {};
    }

    // disable IE ajax request caching
    $httpProvider.defaults.headers.get['If-Modified-Since'] = '0';

    ngDialogProvider.setDefaults({
        className: 'ngdialog-theme-default',
        plain: false,
        showClose: true,
        closeByDocument: true,
        closeByEscape: true,
        appendTo: false,
        preCloseCallback: function () {
            console.log('default pre-close callback');
        }
    });

    .when('/edit-contacts/:contactId',
    {
      templateUrl: 'template/manageContact.html',
      controller: 'ctrlEditContacts'
    })      
    .otherwise({redirectTo:'/all-contacts'});  
});    

app.factory('httpInterceptor', function ($q, $rootScope, $log) {

    var numLoadings = 0;

    return {
        request: function (config) {

            numLoadings++;

            // Show loader
            $rootScope.$broadcast("loader_show");
            return config || $q.when(config)

        },
        response: function (response) {

            if ((--numLoadings) === 0) {
                // Hide loader
                $rootScope.$broadcast("loader_hide");
            }

            return response || $q.when(response);

        },
        responseError: function (response) {

            if (!(--numLoadings)) {
                // Hide loader
                $rootScope.$broadcast("loader_hide");
            }

            return $q.reject(response);
        }
    };
})


app.controller('ctrlEditContacts', function ($scope, $routeParams, ContactService){

    // Sort of requests table
    $scope.champTri = null;
    $scope.triDescendant = false;
    $scope.SortPersons = function(champ) {
        if ($scope.champTri == champ) {
            $scope.triDescendant = !$scope.triDescendant;
        } else {
            $scope.champTri = champ;
            $scope.triDescendant = false;
        }   
    }

    $scope.cssChevronsTri = function(champ) {
        return {
            glyphicon: $scope.champTri == champ,
            'glyphicon-chevron-up' : $scope.champTri == champ && !$scope.triDescendant,
            'glyphicon-chevron-down' : $scope.champTri == champ && $scope.triDescendant 
        };
    }

    // MANAGE THE 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";    
    }

    // GET DATA FROM THE DB ABOUT THE CONTACT
    ContactService.loadPersonById($routeParams.contactId).success(function(contact){
        $scope.contact.ID = contact[0].ID;  
        $scope.contact.LASTNAME = contact[0].LASTNAME;  
        $scope.contact.FIRSTNAME = contact[0].FIRSTNAME;    

        $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;        
    });

    $scope.submitForm = function(contact){
        console.log(contact);

        if($scope.ContactForm.$valid){
            ContactService.updatePerson(contact, $routeParams.contactId).success(function(){
                /*$scope.ContactForm.$setPristine();
                $scope.contact= null;*/
                alert('Person updated successfully');
                window.location="#/view-contacts/" + $scope.contact.ID;
            });
        }
    };  

});

Here my factory (appService.js)

app.factory('ContactService', function($http){

    var factory={};

    factory.loadPersonById=function(id){
        return $http.get('http://myapp/contacts.cfc?method=loadPersonById&idPerson=' + id);
    };  

    factory.updatePerson=function(objContact,id){
        return $http.get('http://myapp/contacts.cfc?method=updatePerson&contactid=' + id + '&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>

      <!---------------- FOR ADDING EMAILS FIELDS ------------ START --->

        <div ng-repeat="(key, email) in emails | limitTo : 5">

          <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</span>
                </a>
            </div>  

          </div>

        </div>        


      <!---------------- FOR ADDING EMAILS FIELDS ------------ END--->


      <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">       
          <a href="#/view-contacts/{{contact.ID}}" class="inline btn btn-primary">Cancel</a>
        </div>
      </div>  

    </form> 
  </div>
 </div>

The value of the EMAILS (EMAIL_1, EMAIL_2, EMAIL_3, ... is not displayed in the form if there is defined. I tried to put contact.EMAIL_$index or contact.EMAIL_[$index] or contact.EMAIL_[key] but it's not working.

Could you please help me ?

Thanks for your support

Jesus Carrasco · Accepted Answer · 2017-07-13 21:30:30Z

1

In your HTML substitute

ng-model="contac.EMAIL_$index with

ng-model="contact['EMAIL_'+$index]"

and in your controller check push emails fore each email in your answer of the service

example:

ContactService.loadPersonById($routeParams.contactId).then(function(contact){
        for(var i = 0; i < 5; i++){
            $scope.emails.push({});
        }// i add this to tell we have 5 mails

        $scope.contact.ID = contact[0].ID;  
        $scope.contact.LASTNAME = contact[0].LASTNAME;  
        $scope.contact.FIRSTNAME = contact[0].FIRSTNAME;    
        $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;
    });

edited Jul 13, 2017 at 21:30

answered Jul 13, 2017 at 21:23

Jesus Carrasco

1,3541 gold badge11 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJs Adding Form Fields Dynamically and identification in the scope

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related