AngularJS de saisie du numéro de vue formatée

Comme écrit dans les commentaires, input type="number" ne supporte pas de rien, mais en chiffres, d'un séparateur décimal (généralement , ou . selon les paramètres régionaux) et - ou e. Vous pouvez toujours entrer ce que vous voulez, mais le navigateur ne jetez n'importe quel inconnu /caractère incorrect.

Cela vous laisse avec 2 options:

• Utilisation type="text" et le modèle de validation comme pattern="[0-9]+([\.,][0-9]+)*" à la limite de ce que l'utilisateur peut entrer alors automatiquement le formatage de la valeur comme vous le faites dans votre exemple.
• Mettre une superposition sur le dessus du champ de saisie qui rend les numéros de la façon que vous voulez et encore permet à l'utilisateur d'utiliser l'outil de type="number" contrôles de saisie, comme montré ici.

La deuxième solution utilise un supplémentaire <label> balise qui contient la valeur actuelle et est caché via CSS, lorsque vous vous concentrez le champ de saisie.

Toutes ces années plus tard, il n'y a pas une solution HTML5 hors de la boîte pour cela.

Je suis en utilisant <input type="tel"> ou <input type="text"> ("tel" apporte un clavier numérique sur Android et iOS, qui dans certains cas est un bonus.)

Puis j'avais besoin d'une directive:

• filtre de caractères non numériques
• ajouter des mille-séparateur de virgule que l'utilisateur tape
• utilisation $parsers et keyup pour définir elem.val() et $formatters pour régler l'affichage...
• ...alors que derrière les coulisses, d'attribuer ng-model un nombre à virgule flottante

La directive exemple ci-dessous fait cela, et il accepte les négatifs et les nombres à virgule flottante, sauf si vous spécifiez que vous souhaitez seulement positif ou entiers.

Ce n'est pas la solution complète je le voudrais, mais je pense qu'il comble le fossé.

HTML

<input type="text" ng-model="someNumber" number-input />

JAVASCRIPT

myApp.directive('numberInput', function($filter) {
  return {
    require: 'ngModel',
    link: function(scope, elem, attrs, ngModelCtrl) {

      ngModelCtrl.$formatters.push(function(modelValue) {
        return setDisplayNumber(modelValue, true);
      });

      //it's best to change the displayed text using elem.val() rather than
      //ngModelCtrl.$setViewValue because the latter will re-trigger the parser
      //and not necessarily in the correct order with the changed value last.
      //see http://radify.io/blog/understanding-ngmodelcontroller-by-example-part-1/
      //for an explanation of how ngModelCtrl works.
      ngModelCtrl.$parsers.push(function(viewValue) {
        setDisplayNumber(viewValue);
        return setModelNumber(viewValue);
      });

      //occasionally the parser chain doesn't run (when the user repeatedly 
      //types the same non-numeric character)
      //for these cases, clean up again half a second later using "keyup"
      //(the parser runs much sooner than keyup, so it's better UX to also do it within parser
      //to give the feeling that the comma is added as they type)
      elem.bind('keyup focus', function() {
        setDisplayNumber(elem.val());
      });

      function setDisplayNumber(val, formatter) {
        var valStr, displayValue;

        if (typeof val === 'undefined') {
          return 0;
        }

        valStr = val.toString();
        displayValue = valStr.replace(/,/g, '').replace(/[A-Za-z]/g, '');
        displayValue = parseFloat(displayValue);
        displayValue = (!isNaN(displayValue)) ? displayValue.toString() : '';

        //handle leading character -/0
        if (valStr.length === 1 && valStr[0] === '-') {
          displayValue = valStr[0];
        } else if (valStr.length === 1 && valStr[0] === '0') {
          displayValue = '';
        } else {
          displayValue = $filter('number')(displayValue);
        }

        //handle decimal
        if (!attrs.integer) {
          if (displayValue.indexOf('.') === -1) {
            if (valStr.slice(-1) === '.') {
              displayValue += '.';
            } else if (valStr.slice(-2) === '.0') {
              displayValue += '.0';
            } else if (valStr.slice(-3) === '.00') {
              displayValue += '.00';
            }
          } //handle last character 0 after decimal and another number
          else {
            if (valStr.slice(-1) === '0') {
              displayValue += '0';
            }
          }
        }

        if (attrs.positive && displayValue[0] === '-') {
          displayValue = displayValue.substring(1);
        }

        if (typeof formatter !== 'undefined') {
          return (displayValue === '') ? 0 : displayValue;
        } else {
          elem.val((displayValue === '0') ? '' : displayValue);
        }
      }

      function setModelNumber(val) {
        var modelNum = val.toString().replace(/,/g, '').replace(/[A-Za-z]/g, '');
        modelNum = parseFloat(modelNum);
        modelNum = (!isNaN(modelNum)) ? modelNum : 0;
        if (modelNum.toString().indexOf('.') !== -1) {
          modelNum = Math.round((modelNum + 0.00001) * 100) / 100;
        }
        if (attrs.positive) {
          modelNum = Math.abs(modelNum);
        }
        return modelNum;
      }
    }
  };
});

https://jsfiddle.net/benlk/4dto9738/

vous pouvez l'essayer, j'ai modifié la directive j'ai vu ici...
Comment faire pour empêcher une entrée pour accepter uniquement les numéros? ...

voici la modification de la directive j'ai fait... Cette directive utilise l'événement keyup pour modifier l'entrée à la volée...

.directive('numericOnly', function($filter) {
return {
require: 'ngModel',
link: function(scope, element, attrs, modelCtrl) {
element.bind('keyup', function (inputValue, e) {
var strinput = modelCtrl.$$rawModelValue;
//filter user input
var transformedInput = strinput ? strinput.replace(/[^,\d.-]/g,'') : null;
//remove trailing 0
if(transformedInput.charAt(0) <= '0'){
transformedInput = null;
modelCtrl.$setViewValue(transformedInput);
modelCtrl.$render();
}else{
var decimalSplit = transformedInput.split(".")
var intPart = decimalSplit[0];
var decPart = decimalSplit[1];
//remove previously formated number
intPart = intPart.replace(/,/g, "");
//split whole number into array of 3 digits
if(intPart.length > 3){
var intDiv = Math.floor(intPart.length / 3);
var strfraction = [];
var i = intDiv,
j = 3;
while(intDiv > 0){
strfraction[intDiv] = intPart.slice(intPart.length-j,intPart.length - (j - 3));
j=j+3;
intDiv--;
}
var k = j-3;
if((intPart.length-k) > 0){
strfraction[0] = intPart.slice(0,intPart.length-k);
}
}
//join arrays
if(strfraction == undefined){ return;}
var currencyformat = strfraction.join(',');
//check for leading comma
if(currencyformat.charAt(0)==','){
currencyformat = currencyformat.slice(1);
}
if(decPart ==  undefined){
modelCtrl.$setViewValue(currencyformat);
modelCtrl.$render();
return;
}else{
currencyformat = currencyformat + "." + decPart.slice(0,2);
modelCtrl.$setViewValue(currencyformat);
modelCtrl.$render();
}
}
});
}

};

vous utilisez comme ça ...

<input type="text" ng-model="amountallocated" id="amountallocated" numeric-only />