Замена периода клавиатуры запятой на входе (тип = число) угловой директивой

Question

Проблема:

Меня недавно попросили, чтобы при вводе числа в поле в моем спа-приложении, построенном с использованием угла, была введена точка запятой при вводе числа в поле в приложении spa. Я решил использовать директивный подход, чтобы иметь возможность легко использовать его в будущем, и добился частичного успеха, но он работает только на

input type="text"

При попытке использовать то же решение на

input type="number"

поле get reset и я получаю следующую ошибку:

ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js:3501 Указанное значение "12" не является допустимым числом. Значение должно соответствовать следующему регулярному выражению: -?(\ D +|\d+.\ D +|.\ D +)([eE][-+]?\ D +)?

но когда я печатаю, например, 12, ошибка не возникает.

Любая идея о том, почему и как заставить его работать на ввод числа?

Код:

'use strict';

myApp.directive('replaceKeypadComma', function() {
    return {
        restrict: 'A',
        link: function($scope, element, attrs, controller) {
            element.on('keydown', function(event) {
                if (event.keyCode == 110) {
                    element.val(element.val() + ',');
                    event.preventDefault();
                }
            });
        }
    }
});

Рабочий Плункер с вводом текста:

https://plnkr.co/edit/hBThZOI1T4rk3cbwRscq

Сломанный плункер с вводом числа:

https://plnkr.co/edit/zBqwWmZ0iAhIH728ZeCh

Answer 1

input type="number" разрешено содержать только " число с плавающей запятой", поэтому не допускает запятых.

Некоторые браузеры принимают ввод, содержащий десятичную запятую, и преобразуют его в десятичный период, в зависимости от локали пользователя или страницы, но достаточное количество из них не делает этого, поэтому лучше избегать input type="number" если вам нужно поддерживать числа с запятой.