How to limit numbers for before and after the decimal point, something like 123.123 , so it can have max 3 numbers before . and max 3 numbers after .

   <div class="form-group">
  <input type="number" class="form-control" name="ta" id="ta" placeholder="ta" ng-model="ta.kol" ng-maxlength="15"/>
  <p ng-show="taForm.kol.$error.maxlength" class="help-block">Max 15 symbols !</p>
   </div>

How to limit numbers for before and after the decimal point, something like 123.123 , so it can have max 3 numbers before . and max 3 numbers after .

   <div class="form-group">
  <input type="number" class="form-control" name="ta" id="ta" placeholder="ta" ng-model="ta.kol" ng-maxlength="15"/>
  <p ng-show="taForm.kol.$error.maxlength" class="help-block">Max 15 symbols !</p>
   </div>

• javascript
• angularjs
• input

Share Improve this question Follow edited Mar 30, 2016 at 11:48 L777 8,51733 gold badges4343 silver badges6666 bronze badges asked Mar 30, 2016 at 11:40 MarkMark 20911 gold badge55 silver badges1818 bronze badges 3

• Do you consider external plugins like ng-mask or you need a pure angular solution? github./candreoliveira/ngMask – Vladimir Furso Commented Mar 30, 2016 at 11:47
• hmm interesting plugin, but it would be better if there is some simpler solution, otherwise that will have to do – Mark Commented Mar 30, 2016 at 11:53
• Since you are already using the type number, you could specify a value for the max attribute (999.999), the corresponding value for min and a step attribute of 0.001 – Loufylouf Commented Mar 30, 2016 at 11:53

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

You can add a onchange event on the input field and call a function that validates the current input value using regex and municate same to the user.

Regex : ^[0-9]{0,3}.?[0-9]{0,3}$

JS Code to validate:

function validateNumberInput(inputNumber){
     return number.search(/^[0-9]{0,3}.?[0-9]{0,3}$/) == 0 ? true : false;
}

Also you can write a directive in angular that can handle the same.

This can be solved with a simple piece of javascript if you just add an Event Listener to the input and then split the input on the decimal point you can then check the length of both parts and act accordingly.

https://jsfiddle/pk07net6/

function checkNumbers()
{
    console.log(this.value);
  var numbers = this.value.split('.');
  var preDecimal = numbers[0];
  var postDecimal = numbers[1];

  if (preDecimal.length>3 || postDecimal.length>3)
  {
        alert("Max 3 numbers before and after the decimal point.")
    this.select();
  } 
}

//ADD LISTENER TO INPUT
var input = document.getElementById("numberInput");
console.log(input);
input.addEventListener("change", checkNumbers)

You can use ng-pattern with a regex:

<input ng-pattern="/^[0-9]{1,3}(\.\d{0,3})?/" />

docs: https://docs.angularjs/api/ng/directive/ngPattern

For the fraction its pretty easy as you can use Angular number filter. As for the number before the digit you should create a filter like this :

app.filter('beforeDigit', function ($filter) {
   return function (input) {
    if (input>1000) 
       return (input % 1000)
    elseif(input<1000)
       return input; 
   };
});

So in the end you will end up with something like this :

{{val | filter:{number:3}, filter:beforeDigit }}

After hours of work, I create java-script function which work on keypress event. Number can be 8 characters before decimal separator and 2 character after decimal separator.

https://codepen.io/dumbelovic/pen/bvdXXq

function BeforeAfter(e, obj) {
sepDec = "."
var keycode;
var fieldval = obj.value;

if (window.event) keycode = window.event.keyCode;
else if (e) { keycode = e.which; }
else { return true; }

// denided first charatcter to be zero
if (fieldval == "" && keycode == 48)
    return false;

// denided first character to be decimal point
if (fieldval == "" && (keycode == 44 || keycode == 46))
    return false;

// enter first decimal point, 
// but every next try to eneter decimal point return false
if (fieldval != "" && ((keycode == 44 || keycode == 46))) {
    if (fieldval.indexOf(sepDec) < 0) {
        var newValue = fieldval + sepDec;
        $(obj).val(newValue);
    }
    return false;
}



var splitfield = fieldval.split(sepDec);

var beforeDecimalPoint;
var afterDecimalPoint;

if (splitfield.length == 1) {
    beforeDecimalPoint = splitfield[0];
    afterDecimalPoint = "";
}
else if (splitfield.length == 2) {
    beforeDecimalPoint = splitfield[0];
    afterDecimalPoint = splitfield[1];
}

if (beforeDecimalPoint.length == 8 && keycode != 8 && keycode != 0) {
    if (obj.selectionStart >= 0 && obj.selectionStart <= 8)
        return false;
}

if (afterDecimalPoint.length == 2 && keycode != 8 && keycode != 0) {
    if (obj.selectionStart >= beforeDecimalPoint.length + 1 && obj.selectionStart <= beforeDecimalPoint.length + 1 + 2)
        return false;
}


return true;
}