Force input[type=number] without browser quircks

[Antonello Pasella]

Hi all, 

is there a way to use  <input type="number" ng-model="vm.foo" /> syntax but WITHOUT usa type=number?

I have some quircks with spinner, mouse wheel and so on.

Is there a way to create a new directive (line type="number-string") that do all that type="number" does but without browser defaults?

This patch will explain my needs 

https://github.com/angular/angular.js/pull/13352

Is there a way to acheive this in a directive?

[Sander Elias]

Hi Antonello,

I knew I had a similar request in the past. Not exactly what you need, but there is enough in there, so you probably be able to adapt it to what you need.

(It took me quite some searching to find this one back..)

Does this help you enough?

Regards

Sander

[Antonello Pasella]

It's a goos start point, but non complete.

I need to remove all browser specific behaviours (including mouse scroll) and I'm trying to avoid this

Thanks anyway!

Antonello

[Sander Elias]

Hi Antonello,


perhaps you can use the ngPattern option on a text field.
Something along those lines:

<input
   type="text"
   ng-model="someValue"
   require
   ng-pattern="/^\d{0,9}(\.\d{1,9})/">

You probably need to adapt the regex to your own specification.

Regards

Sander

[Antonello Pasella]

Already done 😀

But the data type is string, not numeric

Thanks anyway!

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/9yMl23dFWkE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Antonello Pasella http://www.pasella.it

[Sander Elias]

Hi Antonello,

You should be able to handle that with an ngModel $formatter. 

Regards

Sander

[Sander Elias]

Hi Antonello,

I figured a sample might help you.

function toNum() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            ctrl.$formatters.push(function (value) {
                return value ? parseFloat(value) : null;
            });
        }
    };


angular
  .module('someModule',[])
  .directive('toNum', toNum)

Should be able to fix the number issue

Regards

Sander

[Antonello Pasella]

Thanks! This is the better solution.

I'll try to add the ngPattern validator inside this directive