CODEWITHSUNDEEP
angularjs
Mark Bucknell
Mark Bucknell

Reputation: 447

Adding tab keypress to fields in Angularjs

I've got a customer form with about 15 fields. When I tab from field to field I need an event to capture this, check if there are at least 3 fields or the 15 with data entered and then use that data to go off to a web service and do some stuff.

How do I do it?

Upvotes: 0

Views: 5186

Answers (3)

Michael Kang
Michael Kang

Reputation: 52847

I recommend taking advantage of ngModel and form validation.

Usage

  1. Use the minimumFields directive to specify the minimum number of fields needed to pass validation.

  2. For each field with an ngModel that you want to include for validation, add a field directive.

  3. Bind to the validation error minimumFields using ngMessages

  4. In the submit handler check that the form is valid before submitting.

Example

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

Demo

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>

Upvotes: 0

dting
dting

Reputation: 39287

Heres an example using $watchCollection:

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!')
    }
  });
});
<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>

Upvotes: 1

Jeeva J
Jeeva J

Reputation: 3253

If you are need only to identify the tab key press, then you can use,

ng-blur

directive.

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

in test function you can check, whether user pressed tab key event or not. or you can use ng-keyup directive.

Upvotes: 0

Related Questions