javascript - component - page title angular 4
Directiva de formato de dinero en Angular (3)
Creo que esto puede completar tu requerimiento
https://github.com/FCSAmerica/angular-fcsa-number
puede restringir la entrada que solo permite números con decimales por validación de entrada angular predeterminada o mediante el uso de código de char.
Necesito una directiva para filtrar un campo por moneda, por lo que un usuario solo necesita escribir y el decimal está implícito.
Necesariamente:
- Formato de campo decimal como tipos de usuario -
Comience en el lugar de las centésimas a medida que el usuario escribe. Entonces escribirían "4" y verían "0.04", escribirían "42" y verían "0.42", escribirían 298023 y verían "2980.23"
- El campo debe ser un número
- Debe permitir negativos
- - Permitir 0.00 como entrada de número
- Idealmente usaría type = "number" pero "type = text" está bien
- Debería poder borrar el campo para estar vacío.
El filtro ng-currency no cumple estos requisitos como está. Por favor, vea el comportamiento en plunkers para ver a qué me refiero.
My First Plunker tiene `input = text ''y permite números negativos. Un problema es que no puede escribir un negativo como el primer número. Cuando borre el campo, volverá a ''0.00'', pero debería estar completamente despejado.
app.directive(''format'', [''$filter'', function ($filter) {
return {
require: ''ngModel'', //there must be ng-model in the html
link: function (scope, elem, attr, ctrl) {
if (!ctrl) return;
ctrl.$parsers.unshift(function (viewValue, modelValue) {
var plainNumber = viewValue.replace(/[^-+0-9]/g,'''');
var newVal = plainNumber.charAt(plainNumber.length-1);
var positive = plainNumber.charAt(0) != ''-'';
if(isNaN(plainNumber.charAt(plainNumber.length-1))){
plainNumber = plainNumber.substr(0,plainNumber.length-1)
}
//use angular internal ''number'' filter
plainNumber = $filter(''number'')(plainNumber / 100, 2).replace(/,/g, '''');
if(positive && newVal == ''-''){
plainNumber = ''-'' + plainNumber;
}
else if(!positive && newVal == ''+''){
plainNumber = plainNumber.substr(1);
}
plainNumber.replace(''.'', '','');
//update the $viewValue
ctrl.$setViewValue(plainNumber);
//reflect on the DOM element
ctrl.$render();
//return the modified value to next parser
return plainNumber;
});
}
};
}]);
My Second Plunker tiene input = text y permite entradas negativas. Al igual que el primer plunker, no permitirá un carácter negativo como primer carácter, solo después de que se tipean los números. El segundo es que comienza en el lugar de las décimas en lugar de las centésimas. (si escribe ''3'' debería ver ''0.03'' pero aquí muestra ''0.3'')
app.directive(''inputRestrictor'', [function() {
return {
restrict: ''A'',
require: ''ngModel'',
link: function(scope, element, attr, ngModelCtrl) {
var pattern = /[^.0-9+-]/g;
function fromUser(text) {
if (!text)
return text;
var rep = /[+]/g;
var rem = /[-]/g;
rep.exec(text);
rem.exec(text);
var indexp = rep.lastIndex;
var indexm = rem.lastIndex;
text = text.replace(/[+.-]/g, '''');
if (indexp > 0 || indexm > 0) {
if (indexp > indexm) text = "+" + text; // plus sign?
else text = "-" + text;
}
var transformedInput = text.replace(pattern, '''');
transformedInput = transformedInput.replace(/([0-9]{1,2}$)/, ".$1")
ngModelCtrl.$setViewValue(transformedInput);
ngModelCtrl.$render();
return transformedInput;
}
ngModelCtrl.$parsers.push(fromUser);
}
};
}]);
¿Cómo puedo conciliar estas soluciones o adaptar una para cumplir con los requisitos? Quiero evitar bibliotecas adicionales o complementos. Me han dicho que el mejor enfoque sería estudiar la fuente del filtro de divisas y recrear ese filtro con los requisitos adicionales. Me encantaría hacer esto, pero realmente no tengo las habilidades para ello en este momento. Estas dos directivas son lo que tengo.
Numérico Angular
Angular Numeric es una directiva sofisticada que implementa un campo completo de entrada numérica.
Muy simple de usar, pero poderoso.
<input numeric min="-20" max="100" decimals="3" />
Hay controles en los valores mínimo y máximo. Cuando el valor cae por debajo del mínimo, el valor se establece en el valor mínimo. Cuando el valor excede el valor máximo, el valor se establece al máximo.
El formateo se realiza en el evento de desenfoque; Los mil separadores y los decimales se basan en la configuración regional actual.
Se puede establecer el número de decimales.
. :: Respuesta actualizada - 14 de julio ::.
Verifique esta directiva simple:
app.directive(''price'', [function () {
return {
require: ''ngModel'',
link: function (scope, element, attrs, ngModel) {
attrs.$set(''ngTrim'', "false");
var formatter = function(str, isNum) {
str = String( Number(str || 0) / (isNum?1:100) );
str = (str==''0''?''0.0'':str).split(''.'');
str[1] = str[1] || ''0'';
return str[0].replace(/(/d)(?=(/d/d/d)+(?!/d))/g, ''$1,'') + ''.'' + (str[1].length==1?str[1]+''0'':str[1]);
}
var updateView = function(val) {
scope.$applyAsync(function () {
ngModel.$setViewValue(val || '''');
ngModel.$render();
});
}
var parseNumber = function(val) {
var modelString = formatter(ngModel.$modelValue, true);
var sign = {
pos: /[+]/.test(val),
neg: /[-]/.test(val)
}
sign.has = sign.pos || sign.neg;
sign.both = sign.pos && sign.neg;
if (!val || sign.has && val.length==1 || ngModel.$modelValue && Number(val)===0) {
var newVal = (!val || ngModel.$modelValue && Number()===0?'''':val);
if (ngModel.$modelValue !== newVal)
updateView(newVal);
return '''';
}
else {
var valString = String(val || '''');
var newSign = (sign.both && ngModel.$modelValue>=0 || !sign.both && sign.neg?''-'':'''');
var newVal = valString.replace(/[^0-9]/g,'''');
var viewVal = newSign + formatter(angular.copy(newVal));
if (modelString !== valString)
updateView(viewVal);
return (Number(newSign + newVal) / 100) || 0;
}
}
var formatNumber = function(val) {
if (val) {
var str = String(val).split(''.'');
str[1] = str[1] || ''0'';
val = str[0] + ''.'' + (str[1].length==1?str[1]+''0'':str[1]);
}
return parseNumber(val);
}
ngModel.$parsers.push(parseNumber);
ngModel.$formatters.push(formatNumber);
}
};
}]);
Y úsalo así:
<input type="text" ng-model="number" price >