angularjs验证电子邮件id按回车按钮_Angularjs

angularjs验证电子邮件id按回车按钮

angularjs

angularjs验证电子邮件id按回车按钮,angularjs,Angularjs,我有一个带有角度引导模式的表单，在该模式中有一个文本框和添加电子邮件按钮，然后默认按钮模式处于禁用模式，直到您键入正确的电子邮件id，当您键入正确的电子邮件id时，按钮模式将变为启用模式，然后您可以单击该按钮，当单击按钮时，它调用名为addOrRemove（）的方法，当你按下Enter按钮时，它会调用相同的方法，但我希望当我按下Enter按钮时，它需要检查文本框是否正确电子邮件id，如果正确，则继续，否则它将显示错误消息我的html代码是 <!doctype html> <

我有一个带有角度引导模式的表单，在该模式中有一个文本框和添加电子邮件按钮，然后默认按钮模式处于禁用模式，直到您键入正确的电子邮件id，当您键入正确的电子邮件id时，按钮模式将变为启用模式，然后您可以单击该按钮，当单击按钮时，它调用名为addOrRemove（）的方法，当你按下Enter按钮时，它会调用相同的方法，但我希望当我按下Enter按钮时，它需要检查文本框是否正确电子邮件id，如果正确，则继续，否则它将显示错误消息

我的html代码是

<!doctype html>
<html ng-app="app" ng-controller="ModalDemoCtrl">
<head>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="example.js"></script>
</head>
<body>

<div >
   <script type="text/ng-template" id="myModalContent">
      <div class="modal-header">
          <h3 class="modal-title">I'm a modal!</h3>
      </div>
      <div class="modal-body">
          <li ng-repeat="item in items " ng-form="subForm">
              <input type="text" name="name" ng-model="item.email" required ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/"  ng-enter="addOrRemove($index,item.email)"/>
              <span ng-show="subForm.name.$error.required" style="color: red">Email required</span>
              <span ng-show="subForm.name.$invalid" ng-hide="subForm.name.$error.required" style="color: red">Invalid email</span>
              <button ng-disabled="subForm.name.$invalid || subFform.name.$dirty" ng-click="addOrRemove($index,item.email)" >{{item.value}}</button>
               expression: {{subForm.name.$invalid}}
          </li>

      </div>
      <div class="modal-footer">
          <button class="btn btn-primary" ng-click="ok()">OK</button>
          <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
      </div>
  </script>

  <button class="btn btn-default" ng-click="open('lg')" >Large modal</button>
</div>
</body>
</html>

请看这里：

模态：

将ng keypress添加到表单

ng keypress=“keyPressed（$event，item，$index）”

当我按enter按钮时，它会在文本框中验证电子邮件，如果它正确，则会调用该方法，否则会显示错误消息。@BharathKumar请参见第46行，按enter键的操作与我看到的按add email按钮相同，但它不会在文本框中验证电子邮件。。。当我按enter键时，它应该验证文本框中的电子邮件id，但它不会验证电子邮件并调用该方法…谢谢，它正在工作，毫无疑问，当光标生成时，我是否可以自动将光标移动到新文本框中。@BharathKumar get focus有点棘手，但我相信您可以在这里找到解决方案，因为这个问题已经出现过几次了

var app = angular.module('app', ['ui.bootstrap']);
//var ModalDemoCtrl = function ($scope, $modal, $log) {
app.controller('ModalDemoCtrl',['$scope', '$modal','$log','$rootScope',
function controller($scope, $modal, $log, $rootScope)
{
$scope.open = function (size) {
$scope.val = "";
var modalInstance = $modal.open({
  templateUrl: 'myModalContent',
  controller: ModalInstanceCtrl,
  size: size,
  backdrop: 'static',
  resolve: {
    items: function () {
      return $scope.items;
    }
  }
});

modalInstance.result.then(function (selectedItem) {
  $scope.selected = selectedItem;
}, function () {
  $log.info('Modal dismissed at: ' + new Date());
});
};}]);

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.

var ModalInstanceCtrl = function ($scope,$rootScope, $modalInstance) {
$scope.check2 = "hllo";

$scope.items = [
    {
        value: "Add email",
        state: "1",
        email: ""
    }];
$scope.check1;


$scope.addOrRemove = function(indexSelected,rcvEmail)
{//alert($rootScope.email1);
    console.log("just check email",rcvEmail);
    console.log("length of the object",$scope.items.length);
    event.preventDefault();
    if($scope.items[indexSelected].state == 1)
    {
        //console.log($scope.items[indexSelected].state);
        $scope.items[indexSelected].value = "Remove email";
        $scope.items[indexSelected].state = "0";
        $scope.items[indexSelected].email = rcvEmail;
        $scope.items.push({value: "Add email", state: "1"});
    }
    else
    {
        //console.log($scope.items[indexSelected].state);
        //$scope.items.push({value: "Remove email", state: "1"});
        $scope.items.splice(indexSelected, 1);
    }

};

$scope.ok = function () {
$modalInstance.close();
};

$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};

};


app.directive('ngEnter', function () {
console.log("directive checke");
return function (scope, element, attrs) {
    element.bind("keydown keypress", function (event) {
        if(event.which === 13) {
            scope.$apply(function (){
                scope.$eval(attrs.ngEnter);
            });

            event.preventDefault();
        }
    });
};
});

<div class="modal-body">
          <li ng-repeat="item in items " ng-form="subForm" ng-keypress="keyPressed($event, item, $index)">
              <input type="text" name="name" ng-model="item.email" required ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/"  ng-enter="addOrRemove($index,item.email)"/>
              <span ng-show="subForm.name.$error.required" style="color: red">Email required</span>
              <span ng-show="subForm.name.$invalid" ng-hide="subForm.name.$error.required" style="color: red">Invalid email</span>
              <button ng-disabled="subForm.name.$invalid || subFform.name.$dirty" ng-click="addOrRemove($index,item.email)" >{{item.value}}</button>
               expression: {{subForm.name.$invalid}}
          </li>

      </div>

var ModalInstanceCtrl = function($scope, $rootScope, $modalInstance) {
  $scope.check2 = "hllo";

  $scope.items = [{
    value: "Add email",
    state: "1",
    email: ""
  }];
  $scope.check1;
  $scope.keyPressed = function(eve, email, idx) {
    if (eve.charCode === 13) {

      addOrRemove(email, idx);
    }
  }

  $scope.addOrRemove = function(indexSelected, rcvEmail) { //alert($rootScope.email1);
    console.log("just check email", rcvEmail);
    console.log("length of the object", $scope.items.length);
    // event.preventDefault();
    if ($scope.items[indexSelected].state == 1) {
      //console.log($scope.items[indexSelected].state);
      $scope.items[indexSelected].value = "Remove email";
      $scope.items[indexSelected].state = "0";
      $scope.items[indexSelected].email = rcvEmail;
      $scope.items.push({
        value: "Add email",
        state: "1"
      });
    } else {
      //console.log($scope.items[indexSelected].state);
      //$scope.items.push({value: "Remove email", state: "1"});
      $scope.items.splice(indexSelected, 1);
    }

  };

  $scope.ok = function() {
    $modalInstance.close();
  };

  $scope.cancel = function() {
    $modalInstance.dismiss('cancel');
  };

};