Использование пользовательского поля валюты для числового ввода в AngularJS

Я использую фильтр валют, показанный в «лучшем ответе» в этой теме: Применить фильтр валюты к полю ввода в angularjs

Проблема в том, что мне также нужно, чтобы поле ввода было только числовым, то есть type="number". Он отлично работает с type="text", но когда я пытаюсь объединить их, ввод исчезает, когда текстовое поле теряет фокус.

<div class="table-cell">
    <div class="field-label table-cell">Estimated Yearly<br />Savings</div>
    <input ng-model="model.yearlySavings" type="number" format="currency">
</div>

JS:

mainModule.directive('format', ['$filter', function ($filter) {
return {
    require: '?ngModel',
    link: function (scope, elem, attrs, ctrl) {
        if (!ctrl) return;

        ctrl.$formatters.unshift(function (a) {
            return $filter(attrs.format)(ctrl.$modelValue)
        });

        elem.bind('blur', function (event) {
            var plainNumber = elem.val().replace(/[^\d|\-+|\.+]/g, '');
            elem.val($filter(attrs.format)(plainNumber));
        });
    }
};
}]);

Примечание. Я бы прокомментировал эту ветку, но у меня недостаточно "представителей", чтобы оставить комментарий...


input formatter angularjs currency
person Mike    schedule 26.03.2018    source источник
comment
Этот фильтр форматирует ввод в строку. Если вы измените тип ввода на число, все, что вы говорите, это то, что поле ввода должно ожидать число, но, применяя этот фильтр, вы изменяете значение этого поля на строку, которая не может быть преобразована в число, поскольку она содержит $ и ','. Есть ли какая-то особая причина, по которой вы хотите, чтобы это было число?   -  person arbghl    schedule 27.03.2018

Ответы (2)


arrow_upward
0
arrow_downward

В итоге я использовал пользовательский форматтер из другого потока SO: AngularJS - Как применить фильтр валюты к текстовому полю при вводе?

Директива называется fcsa-number: https://github.com/FCSAmericaDev/angular-fcsa-number

Это потребовало некоторого изящества, но у меня получилось так:

<input ng-model="model.yearlySavings" name="ys" type="text" 
    ng-class="{ 'error': formName.ys.$invalid }" fcsa-number="{ prepend: '$', preventInvalidInput: true, maxDecimals: 2 }">

Бит «ng-class» используется для динамического окрашивания границы в красный цвет, когда указанный элемент (в данном случае «yearlySavings», также известный как «ys») недействителен. В этом примере он добавляет к моему вводу «$», он предотвращает ввод недопустимого ввода вообще (например, обычные текстовые символы) и устанавливает максимальное количество десятичных знаков равным 2. Как ни странно, это не предотвращает ввод 3+ десятичных знаков. введено, как я и ожидал (например, обычные текстовые символы), но это делает недействительным элемент с более чем 2.

person Mike    schedule 27.03.2018

arrow_upward
0
arrow_downward

Создайте директиву, как показано ниже

HTML

  <div ng-app="myApp">
    <div ng-controller="myCtrl">
      {{amount}}
      <input format-to-currency amount="amount">
    </div>
  </div>

JS

  angular.module('myApp', [])
    .controller('myCtrl', function($scope) {
      $scope.ampunt = 2;
    })
    .directive('formatToCurrency', function($filter) {
      return {
        scope: {
          amount: '='
        },
        link: function(scope, el, attrs) {
          el.val($filter('currency')(scope.amount));

          el.bind('focus', function() {
            el.val(scope.amount);
          });

          el.bind('input', function() {
            scope.amount = el.val();
            scope.$apply();
          });

          el.bind('blur', function() {
            el.val($filter('currency')(scope.amount));
          });
        }
      }
    });

ссылка http://jsfiddle.net/moL8ztrw/7/

person Jayant Patil    schedule 07.08.2018