How to create a custom input type?

Question

I would like to create a custom input type similar to the way AngularJS implements "email", for example.

<input type="email" ng-model="user.email" />

What I would like to create is an input type like this:

<input type="path" ng-model="page.path" />

Any ideas on how this can be accomplished? So far, I've only been able to figure out how to implement custom directives where 'path' is the name of the tag, attribute or class.

For example, I can get this to work but it is inconsistent with the other form fields and I'd really like them to look the same.

<input type="text" ng-model="page.path" path />

app.directive('path', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) { ... }
  };
});

Martin · Accepted Answer · 2013-08-22 14:31:13Z

18

You can create your own input type="path" by creating an input directive with custom logic if the type attribute is set to "path".

I've created a simple example that simply replaces \ with /. The directive looks like this:

module.directive('input', function() {
    return {
        restrict: 'E',
        require: 'ngModel',
        link: function (scope, element, attr, ngModel) {
          if (attr.type !== 'path') return;

          // Override the input event and add custom 'path' logic
          element.unbind('input');
          element.bind('input', function () {
            var path = this.value.replace(/\\/g, '/');

            scope.$apply(function () {
              ngModel.$setViewValue(path);
            });
          });
        }
    };
});

Example

Update: Changed on, off to bind, unbind to remove jQuery dependency. Example updated.

edited Aug 22, 2013 at 14:31

answered Feb 6, 2013 at 19:33

Martin

8,8662 gold badges37 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Pascalius Over a year ago

This creates an error for type="file", because angular is expecting ngmodel now

Martin Over a year ago

@Pascalius you can change the require line to: require: '?ngModel' no make it optional.

Amy B Over a year ago

off and on are jQuery methods. This won't work unless you also have jQuery loaded.

Martin Over a year ago

Thanks @AmyB. No need to have a jQuery dependency on this simple directive. I updated the code and example.

Simeon Cheeseman Over a year ago

@AmyB - It depends which version of Angular you are using and it's included version of jQLite, in 1.2.x they have updated it to have on and off. See here docs.angularjs.org/api/angular.element

|

widmoser · Accepted Answer · 2015-08-17 14:20:16Z

An alternative solution can be achieved by using the $parsers property of the ngModelController. This property represents a chain of parsers that are applied to the value of the input component before passing them to validation (and eventually assigning them to the model). With this, the solution can be written as:

module.directive('input', function() {
    return {
        restrict: 'E',
        require: 'ngModel',
        link: function (scope, element, attr, ngModel) {
          if (attr.type !== 'path') return;

          ngModel.$parsers.push(function(v) {
            return v.replace(/\\/g, '/');
          });
        }
    };
});

Note that there is another property $formatters which is a pipeline of formatters that transform a model value into the value displayed in the input.

See here for the plunker.

Hotkiz · Accepted Answer · 2016-08-24 14:36:00Z

0

Considering compile function is the first in line, would it not be better with:

module.directive('input', function() {
  return {
    restrict: 'E',
    require: 'ngModel',
    compile: function Compile(tElement, tAttrs) {
      if (tAttrs.type !== 'path') return;

      return function PostLink(scope, element, attr, ngModel) {
        // Override the input event and add custom 'path' logic
        element.unbind('input');
        element.bind('input', function () {
          var path = this.value.replace(/\\/g, '/');

          scope.$apply(function () {
            ngModel.$setViewValue(path);
          });
        });
      }
    }
  };
});

answered Aug 24, 2016 at 14:36

Hotkiz

1132 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to create a custom input type?

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related