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

时间:2017-06-21 13:03:45

标签: angularjs controller

我想创建一个包含多个字段的表单:姓名,姓氏,...并添加一个或多个电子邮件。第一个电子邮件字段是必填字段之后,他应该可以点击“添加电子邮件”添加新的电子邮件地址。他可以添加另外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和视图(创建新字段时)。

亲切的问候,

1 个答案:

答案 0 :(得分:0)

您可以尝试以下方法来创建动态表单元素名称属性。

  AlertDialog.Builder alertDialog = new AlertDialog.Builder(
            Drawer.this);
    alertDialog.setTitle("     Logout !!");
    alertDialog.setMessage("Are you sure you want to logout the session?");
    alertDialog.setIcon(R.drawable.ic_question);
    alertDialog.setPositiveButton("YES",
            new DialogInterface.OnClickListener() {
                public void onClick(DialogInterface dialog, int which) {

                        Toast.makeText(getApplicationContext(),"You are successfully Logout",Toast.LENGTH_LONG).show();

                }
            });

    alertDialog.setNegativeButton("NO",
            new DialogInterface.OnClickListener() {
                public void onClick(DialogInterface dialog, int which) {
                    dialog.cancel();
                }
            });
    alertDialog.show();