将tab键添加到Angularjs中的字段

Question

我有一个约15个字段的客户表格。当我从一个字段到另一个字段时，我需要一个事件来捕获它，检查是否至少有3个字段或15个输入数据，然后使用该数据转到Web服务并执行一些操作。

我该怎么办？

Answer 1

下面是一个使用$ watchCollection的例子：

＆＃13;

＆＃13;

var app = angular.module('app', []);

app.controller('myController', function($scope) {
  $scope.input = {};
  
  $scope.$watchCollection('input', function(n) {
    if (Object.keys(n).length > 2) {
      $scope.disabled = true;
      alert('tada!')
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="app" ng-controller="myController">
  <div>a<input ng-model="input.a" ng-model-options="{updateOn: 'blur'}" ng-disabled="disabled"></div>
  <div>b<input ng-model="input.b" ng-model-options="{updateOn: 'blur'}" ng-disabled="disabled"></div>
  <div>c<input ng-model="input.c" ng-model-options="{updateOn: 'blur'}" ng-disabled="disabled"></div>
  <div>d<input ng-model="input.d" ng-model-options="{updateOn: 'blur'}" ng-disabled="disabled"></div>
  <div> {{ input }} </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您只需要识别标签键，则可以使用，

ng-blur

指令。

<input type='text' ng-blur="test()" />

在测试功能中你可以检查用户是否按下了tab键事件。或者你可以使用ng-keyup directive。

Answer 3

我建议利用ngModel和表单验证。

用法

1. 使用minimumFields指令指定通过验证所需的最小字段数。

2. 对于要包含验证的ngModel的每个字段，添加field指令。

3. 使用ngMessages绑定到验证错误minimumFields

4. 在提交处理程序中，在提交之前检查表单是否有效。

实施例

  <form name='myform'>
    Error Object: {{myform.$error }}
    <div minimum-fields="3">
      Field1 <input type="text" field name="field1" ng-model="field1" /></br> 
      Field2 <input type="text" field name="field2" ng-model="field2" /></br>
      Field3 <input type="text" field name="field3" ng-model="field3" /></br>
      Field4 <input type="text" field name="field4" ng-model="field4" /></br>
      Field5 <input type="text" field name="field5" ng-model="field5" /></br>
      Field6 <input type="text" field name="field6" ng-model="field6" /></br>
      Field7 <input type="text" field name="field7" ng-model="field7" /></br>
      Field8 <input type="text" field name="field8" ng-model="field8" /></br>
      Field9 <input type="text" field name="field9" ng-model="field9" /></br>
    </div>

    <div ng-messages="myform.$error">
       <span ng-message="minimumFields">A minimum of 3 fields must be populated</span>
    </div>
     <button ng-click="submit()" ng-disabled="myform.$invalid">Submit</button>
  </form>

演示

var app = angular.module('app' ,['ngMessages']);
app.controller('ctrl', function($scope) {
  $scope.submit = function() {
    if ($scope.myform.$valid) {
      alert('submitted!');
    }
  }
});
app.directive('minimumFields', function() {
  return {
    restrict: 'A',
    require: '^form',
    controller: function($scope) {
      $scope.fields = [];
      this.register = function(field) {       
        $scope.fields.push(field);
        
      }
    },
    link: function(scope, element,attr, formController) {
      var fieldCount = parseInt(attr.minimumFields);
      scope.$watch(function() {
        var count = 0;
        angular.forEach(scope.fields, function(field) {
          if (field.$viewValue != undefined && field.$viewValue != '') {
            ++count;
          }
        });
        return count < fieldCount;
      }, function(newVal) {
          
          formController.$setValidity('minimumFields', !newVal);    
     
      });
                        
      
    }
  }
});

app.directive('field', function() {
  return {
    restrict:'A',
    require: ['^minimumFields','ngModel'],
    link: function(scope, element, attr, ctrls) {
      var minimumFieldsCtrl = ctrls[0];
      var ngModelCtrl = ctrls[1];
      minimumFieldsCtrl.register(ngModelCtrl);
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-messages.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <form name='myform'>
    Error Object: {{myform.$error }}
    <div minimum-fields="3">
      Field1 <input type="text" field name="field1" ng-model="field1" /></br> 
      Field2 <input type="text" field name="field2" ng-model="field2" /></br>
      Field3 <input type="text" field name="field3" ng-model="field3" /></br>
      Field4 <input type="text" field name="field4" ng-model="field4" /></br>
      Field5 <input type="text" field name="field5" ng-model="field5" /></br>
      Field6 <input type="text" field name="field6" ng-model="field6" /></br>

    </div>
   
    <div ng-messages="myform.$error">
       <span ng-message="minimumFields">A minimum of 3 fields must be populated</span>
    </div>
     <button ng-click="submit()" ng-disabled="myform.$invalid">Submit</button>
  </form>
</div>