AngularJS - 创建动态电子邮件字段并检查和验证

我想创建一个包含多个字段的表单：姓名、姓氏……并添加一封或多封电子邮件。第一个电子邮件字段是必填字段。之后他应该可以点击“添加电子邮件”以添加新的电子邮件地址。他可以添加另外 4 封电子邮件（总共 5 封电子邮件）。

系统应验证电子邮件的格式是否正确，必要时显示消息并将数据注册到数据库中。

这里我的控制器“ctrlAddContacts”和模块（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;     

            });
        }
    }
});

这里是我的工厂 (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;

})

后端（服务器）中的函数检索后端发送的参数 objContact 并正确执行查询（它正在工作）

这是我的观点（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">       
          <a href="#/view-contacts/{{contact.ID}}" class="inline btn btn-primary">Cancel</a>
        </div>
      </div>  

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

您能否帮助我对控制器和视图中的 5 个字段的名称进行区分：txtEmail_1、txtEmail_2（创建新字段时）。

亲切的问候，