AngularJS Form - Как создать и обновить несколько писем с помощью ng-switch - PullRequest
0 голосов
/ 15 января 2019

У меня есть форма для добавления / обновления одного или нескольких писем. Первое поле электронной почты является обязательным. После заполнения поля можно нажать «Добавить письмо» для добавления нового адреса электронной почты. Таким способом можно добавить еще 4 электронных письма (всего 5 электронных писем).

Система может проверить правильность формата электронной почты, отобразить сообщение при необходимости и зарегистрировать данные в БД.

Вот мой взгляд (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>

Для добавления контакта все работает и электронные письма правильно зарегистрированы. Для обновления контакта у меня есть проблема с электронными письмами контакта. Чтобы просмотреть все электронные письма, зарегистрированные для контакта, необходимо, чтобы мой текущий скрипт нажимал кнопку «Добавить электронную почту» каждый раз, когда электронная почта регистрируется для просмотра данных. Я хотел бы отобразить электронные письма, если они существуют в БД - поэтому отображать каждый раз строку (поле + данные). Если он не существует, необходимо нажать на кнопку для добавления нового электронного письма.

Не могли бы вы помочь мне обновить этот код, потому что я не могу сделать это напрямую в ng-switch?

Вот мои контроллеры "ctrlEditContacts" и модуль (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() {
            });                     
        }
    };  

});

Вот мой завод (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;

})

Если у вас есть лучшее решение, чем ng-switch, пожалуйста, скажите мне.

Заранее благодарю за помощь.

Ответы [ 2 ]

0 голосов
/ 17 января 2019

Я обновил контроллер:

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

    };    

});

и шаблон:

        <!---------------- 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 --->     
0 голосов
/ 15 января 2019

Заполните $ scope.emails внутри ContactService.loadPersonById ()

...