How to create a custom input type?
Solution 1
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);
});
});
}
};
});
Update: Changed on
, off
to bind
, unbind
to remove jQuery dependency. Example updated.
Solution 2
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.
JamesOR
Updated on August 05, 2022Comments
-
JamesOR almost 2 years
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) { ... } }; });
-
Pascalius almost 11 yearsThis creates an error for type="file", because angular is expecting ngmodel now
-
Martin almost 11 years@Pascalius you can change the require line to:
require: '?ngModel'
no make it optional. -
Amy B almost 11 years
off
andon
are jQuery methods. This won't work unless you also have jQuery loaded. -
Martin almost 11 yearsThanks @AmyB. No need to have a jQuery dependency on this simple directive. I updated the code and example.
-
Simeon Cheeseman over 10 years@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
-
Luis Felipe Perez about 9 yearsConsidering that I have created a Password type and I want this password to follow my security rules like have more than 8 characters. How could I send an invalid response to user?
-
user470370 over 5 yearsIs there a way to do exactly that in vuejs as well?