Угловая ручка с отформатированным номером ввода

Question

Как я могу разрешить такие значения, как «1200» в поле чисел в угловом?

Мои пользователи много копируют/вставляют значения, и им нравится форматирование чисел. Проблема заключается в том, что настройка по умолчанию для угловых input[type=number] выдаст ошибку, когда один из этих отформатированных значений приклеивается обратно.

Вот бухнуться раздвоенный из this page:

http://plnkr.co/edit/rcTrGHb9asRu4tIKPou8?p=preview

Обратите внимание, что при копировании отформатированное значение (например, начиная с 1200) и вставлять его обратно в поле ввода, которое оно разбивает.

Как я могу лучше всего справиться с этим? Похоже, что это то, что было бы обработано раньше, но мне сложно отслеживать что-то. Мне не нужно ничего крепкого. У меня все в порядке с изменением входного текста, чтобы удалить форматирование, и я могу принять стандартный формат en-us.

Answer 1

Вы можете иметь пользовательскую директиву на регулярном вводе (типа = текст) поля для форматирования данных в виде числа всегда

Вашей директива будет выглядеть что-то вроде

angular.module('myApp').directive('myDirective', function() { 
    return { 
    require: 'ngModel', 
    link: function(scope, element, attrs, ngModelController) { 
     ngModelController.$parsers.push(function(data) { 
     //convert data from view format to model format 
     return data; //converted 
     }); 

     ngModelController.$formatters.push(function(data) { 
     //convert data from model format to view format 
     return data; //converted 
     }); 
    } 
    } 
}); 

Source

Answer 2

Вот решение, с которым я пошел:

app.directive('appType', function() { 
    return { 
    require: 'ngModel', 
    link: function (scope, elem, attrs, ctrl) { 
     // Custom number validation logic. 
     if (attrs.appType === 'number') { 
     return ctrl.$parsers.push(function (value) { 

      var v = value.replace(/,/g,''), 
       valid = v == null || isFinite(v); 

      ctrl.$setValidity('number', valid); 

      return valid && v != null ? Number(v) : undefined; 
     }); 
     } 
    } 
    }; 
}); 

Это благодаря ссылке, которую я нашел, используя все ваши отзывы: http://blakeembrey.com/articles/angular-js-number-validation-bug/

Обновлено plunker: http://plnkr.co/edit/rcTrGHb9asRu4tIKPou8?p=preview