Allow only one decimal on input in Angular2 - javascript

This is my input:
<input [(ngModel)]="minimumRange" min="1" placeholder="0.0" step="0.1" type="number">
What I need is, when someone enters
"1"
, I need it to return
"1.0".
on blur
How is this possible?

Using the number #Pipe you should be able to achieve this.
<input [ngModel]="minimumRange | number : '1.1-2'" min="1" (ngModelChange)="minimumRange=$event" placeholder="0.0" step="0.1" type="number">
For more info:
What are the parameters for the number Pipe - Angular 2
http://www.concretepage.com/angular-2/angular-2-decimal-pipe-percent-pipe-and-currency-pipe-example
Hope it helped! Good coding bro!
Update:
If we use #Pipe in model like this:
<input [(ngModel)]="myModel| uppercase">
It will throw the following error:
Parser Error: Cannot have a pipe in an action expression at column X
We will just need to change it to this:
<input [ngModel]="myModel| uppercase" (ngModelChange)="myModel=$event">
Update2:
Added (ngModelChange)="minimumRange=$event" to keep the two way binding functionality.
As #n00dle pointed me, removing the () removes the 2 way binding functionality. So the way to use #Pipe in a 2-way-binding would be using also (ngModelChange).
This could be of huge use:
Using Pipes within ngModel on INPUT Elements in Angular2-View

try this
<input [(ngModel)]="minimumRange" min="1" placeholder="0.0" step="0.1" type="number" (keyup)='conversion()'>
conversion(){
this.minimumRange = this.minimumRangex.toPrecision(2);
}

private _minimumRange:number;
get minimumRange():number{
return this._minimumRange;
}
set minimumRange(num:number){
this._minimumRange = num.toPrecision(2);
}
<input [(ngModel)]="minimumRange" min="1" placeholder="0.0" step="0.1" type="number">

Related

Issue with number with decimal point value

I have a textbox which accepts "Percentage"value like below :
<input class="form-control" type="number" step="1" min="0" ng-pattern="/^[0-9]+(\.[0-9]{1,3})?$/" ng-model="$scope.taxPercentage">
When user enters "0.5202" then it works but when user enters ".5202" then the value is "undefined".
Now, user wants this textbox to accept value like this :
.5202
.3412
Now what is happening is when I print :
console.log($scope.taxPercentage); //undefined
How do I make this textbox accept percentage values with decimal points like "0.5202, .5202" etc?
This should do but there may also be a more readable regex than that
<input class="form-control" type="number" step="1" min="0" ng-pattern="^(\.[0-9]{1,3})|[0-9]+(\.[0-9]{1,3})?$" ng-model="$scope.taxPercentage">

How to display decimal numbers with dot instead of comma in HTML Input tag type="number" in Google Chrome

I would like to know how can I use . to separate decimals in a HTML Input tag type="number" instead of , using Google Chrome (Version 89.0.4389.82) MacOs Catalina.
So far from what I've tried Firefox is the only browser which splits decimal numbers with .
Does anyone faced this issue?
Any ideas how to fix it?
<input type="number" value="1.5" step="0.1" min="0" />
Browser decimal separators differ according to the region. I think your issue is parsing the value for different regions( , and .)
Use valueAsNumber to extract the value
valueAsNumber (MDN Documentation)
double: Returns the value of the element, interpreted as one of the following, in order:
A time value
A number
NaN if conversion is impossible
window.addEventListener('DOMContentLoaded', (event) => {
const ageInput = document.querySelector('#age');
console.log('Age:', ageInput.valueAsNumber);
console.log('Type of Age:', typeof ageInput.valueAsNumber);
});
<input id="age" type="number" value="1.5" step="0.1" min="0" pattern="[0-9]+([,\.][0-9]+)?" />
Also added pattern for sake of completeness.

Problem with HTML5 input type number dynamic validation with regex

I have a dynamic input generated with a simple jQuery(...).apend(...) that draw this code on my webpage:
<input type="number" name="19000003" min="0" max="99999999" required="" step="0.1"
oninput="/^(?:\d{0,8})(?:,\d{0,3})?$/.test(this.value) ? this.value : this.value = this.value.slice(0,-1);">
I can validate the first part (maximum size of characters including ','), but it gives me an error when y try to validate decimals.
he specified value "111." is not a valid number. The value must match
to the following regular expression:
-?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?
When I test the regex code on the Chrome console it works (like these examples)
/^(?:\d{0,8})(?:,\d{0,3})?$/.test('1234,12');
/^(?:\d{0,8})(?:,\d{0,3})?$/.test('123,');
but doesn't works inside the input. What could I be doing wrong?
Your regexp does not work because you are trying to match a , on the input. However, even if you see a , on the browser, internally It is stored as . (probably to avoid the sort of problems you are facing now when the browser uses different locales)
So use /^\d{1,8}(?:\.\d{1,3})?$/ for your regex instead.
Here I leave a demo of the code. I have added an alert for every keypress so you can see how It is stored. Try to write 1,1 and see what happens.
<input type="number" name="19000003" min="0" max="99999999" required="" step="0.1"
oninput="alert(this.value); /^\d{1,8}(?:\.\d{1,3})?$/.test(this.value) ? this.value : this.value = this.value.slice(0,-1);">
In addition to Julio's answer
note that step="0.1" can also break your form validation.
It's better to adhere to your regex validation (for 3 decimals, step="0.001")
More info here
try to separate function from element
const myElement = document.getElementById("someInput");
myElement.oninput = function(ev) {
/^(?:\d{0,8})(?:,\d{0,3})?$/.test(this.value) ? this.value : this.value = this.value.slice(0, -1);
}
<input type="number" id="someInput" name="19000003" min="0" max="99999999" required="" step="0.1" />

How to perform inline validation in Knockout on an input field

I want to allow the user to only enter postive numbers and numbers less then 100.
How can i modify this input markup to get my required validation.
<input data-bind="value : $root.rootData.Page" class="form-control">
Edit: I know i can validate in JS, but for my particular case i want to do it solely in the makrup.
You can use regular expressions with HTML5 using the pattern attribute.
How can I validate number between 1 and 99 using regular expression? - Will give you some information about different ways to check if a number is between 1 and 99
From your example, you could use the following
<input data-bind="value : $root.rootData.Page" class="form-control" pattern="^[1-9][0-9]?$">
instead of using regex to match a number field, why not just use the number type and provide min/max?
<input type="number" min="1" max="99" step="1" data-bind="value : $root.rootData.Page" class="form-control" />
Regex could be used in combination with number type as a fallback, since FF support for the number type is lacking:
<input type="number" min="1" max="99" step="1" pattern="^[1-9][0-9]?$" data-bind="value : $root.rootData.Page" class="form-control" />

Can I write one javascript/coffeescript to handle multiple inputs with the same prefix?

I am trying to build a loop of forms in rails that will create (among else) multiple instances of the following two inputs:
<input class="input-small" id="offer_value" min="0" name="offer[value]" step="any" type="number" />
<input class="input-small" id="total" readonly="readonly" value=""/>
The value of the second one should change with a change in the value of the first one according to the following coffeescript:
$ ->
$('#offer_value').change ->
$('#total').val($('#offer_value').val()*2).change();
My problem is that if I give the same id to all (offer_value, total), then the coffeescript hanldes only the first that it finds (giving the same ids sounds wrong anyway).
If I give unique ids (offer_value1, offer_value2,...) then how can I catch them all without writing coffeescripts for all of them?
With JQuery if you select by Id (# selector) you will get only one element, since Id is supposed to be unique and JQuery will use getElementById
Therefore, select by class (. selector)
Check this answer for more information https://stackoverflow.com/a/8498617/643500.
Edit:
Use the same class for the inputs.
<input class="input-small offer_value" min="0" name="offer[value]" step="any" type="number" />
<input class="input-small" id="total" readonly="readonly" value=""/>
Then for the script
$ ->
$('.offer_value').keyup ->
$(this).next().val($(this).val()*2).change();

Categories

Resources