I want to set a maximum value for a number.
How to pad an input number with a certain number especially the number 9?
For example, if my input is 5, output would be 99999. If my input is 8, the output would be 99999999.
In template File:
<input type="number" (keyup)="addNumber($event)" [(ngModel)]="numValue">
tsFile:
ddNumber(event) {
if (event.target.value == 9) {
this.numValue = 9999999;
} else if (event.target.value == 8) {
this.numValue = 9999999999;
}
}
this is simple approach...u can write the hostlistener event,we can based on the input value.
Related
I have an input field where the user can input a numeric value. I need to automatically insert commas after every 3rd digit. When the user deletes numbers, the commas need to be in the correct places (after every 3rd digit, starting from the first number) as well as stay in place instead of relocating to the end of the input value. I cannot use ngModel, this is a reactive form.
I have tried this method in my TS file, to mask the user input
maskInputAmount(e) {
const t = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})
(\d{0,3})/);
e.target.value = t[2] ? t[1] + ',' + t[2] + (t[3] ? ',' + t[3] : '') :
t[1];
}
And in my HTML input field
<input (input)="maskInputAmount($event)" maxlength=11
formControlName="businessNetWorth" id="businessNetWorth"
type="text" class="form-control col-3 col-lg-12" data-hint="yes">
I am having commas come after every 3rd number. However, when deleting numbers from the end of the input, the commas at the front of the number should update correctly. For example, I enter '123,456,789'. When I delete the last two numbers I get '123,456,7' when it should be '1,234,567'.
One other issue, when a user deletes one of the first numbers, the comma in the input box automatically repositions itself to the end of the input value, I need it to stay in place. For example: '123,456,789'. I delete '3' and have '124,567,89' and the cursor is now behind the '9' when it should stay in front of the '2'.
How can I change my maskInputAmount(e) method to make this behave correctly?
Following code worked for me. (Assume present currency is in Indian rupees. If you want to have your own currency then you need to mention your country's code in code).
app.component.html
<input type="text" [formControl]="currency" (input)="changeToCurrency(currencyTextRef)" #currencyTextRef>
//sending reference of input element #currencyTextRef to function
{{ currency.value }}
app.component.ts
currency = new FormControl();
temp;
currncyLength=0;
changeToCurrency(currencyTextRef) {
this.currncyLength = this.currency.value.length;
console.log("currency len is "+this.currncyLength);
let index:number;
// if(currencyTextRef.selectionStart || currencyTextRef.selectionStart == '0') {
// console.log("index isss "+currencyTextRef.selectionStart);
index = currencyTextRef.selectionStart; //getting caret(cursor) position
// }
console.log("index is "+index);
// console.log("value is "+this.currency.value);
let a = this.currency.value;
a = a.replace(/,/g,'');
let num:number = + a;
let temp = new Intl.NumberFormat('en-IN').format(num); //inplace of en-IN you can mention your country's code
// console.log("temp is "+temp);
this.currency.setValue(temp.toString());
console.log("pressent len iss "+this.currency.value.length)
if(this.currncyLength<this.currency.value.length) {
console.log("incoming to < ")
index+=1;
currencyTextRef.setSelectionRange(index,index);
}
else if(this.currncyLength >=this.currency.value.length) {
console.log("incoming to > ");
// index-=1;
currencyTextRef.setSelectionRange(index,index);
}
// else {
// currencyTextRef.setSelectionRange(index,index);
// }
}
Following link might help.
Intl number MDN
My client requirement is as follows
1. The input field should be a text
2. It should not allow characters
3. It should have range of 0-100
4. Input format is 99.99
we are using angular 7. Pattern is not working for the validation
Can someone please help me. I am struggling from one day :(
Thanks!
To achieve the expected result, use below options of keyup event
On every key up, slit input value by '.'
The first part of the split array will have value before the decimal point and the second part of the array will have value after decimal point
Reassign input value based on length
component.html
<input type="text" (keyup)="onKeyup($event)" />
component.ts
onKeyup(e) {
const val = e.target.value.split(".");
if (!val[1]) {
e.target.value =
val[0].split("").length > 2
? e.target.value.substr(0, e.target.value.length - 1)
: e.target.value;
} else {
e.target.value =
val[1].split("").length > 2
? val[0] + "." + val[1].substr(0, val[1].length - 1)
: e.target.value;
}
}
working code sample for reference - https://codesandbox.io/s/angular-p1gh1
Updated code with HTML and javascript
codepen - https://codepen.io/nagasai/pen/xoLqdN?editors=1010
function onKeyup(e) {
const val = e.target.value.split(".");
if (!val[1]) {
e.target.value =
val[0].split("").length > 2
? e.target.value.substr(0, e.target.value.length - 1)
: e.target.value;
} else {
e.target.value =
val[1].split("").length > 2
? val[0] + "." + val[1].substr(0, val[1].length - 1)
: e.target.value;
}
}
<input type="text" onkeyup ="onKeyup(event)"/>
In the latest release "47.0.2526.73" all my input type="number" are clearing every time that we try to type a float point number, example : 1.1
These inputs have a keyup event handler in jQuery to remove the leading zeros.
This code was working before the latest update.
Is there a bug?
-- UPDATE --
//Fix to leading zero decimals
$('input[type=number]').keyup(function (e) {
if (!this.value && (e.keyCode == 190 || e.keyCode == 110)) {
this.value = '0.';
}
});
This is the code that is not longer working
Change the step so it don't use the default '1' and uses a float. It will allow you to use float numbers and not only integers.
Ex: '0.1'
Looks like chrome is no longer allowing you to read/set the input value for number types using the keyup event when it is in the middle of the decimal point typing.
This is when the user type just '.', you cannot get the value '1.' or set it the same way in the event.
What I did was change the logic to:
$('input[type=number]').keyup(function (e) {
if (this.value) {
if (this.value.charAt(0) == '.')
{
this.value = '0' + this.value;
}
}
});
This is the only way that I have found to fix typing a number without the leading zero in the input box
i need to validate a phone number field in my form my conditions are numbers may be 8 digits or 10 digits other than that should be give an notice the way i try is like this is this ok ??
<input class="form-control" name="phone_no" id="phone_no" placeholder="Enter a Phone Number" type="tel" title='Phone Number(Format:04xxxxxxx)' size="10" min="8" max="10" required>
or how use the patter attribute to achieve this??pattern='\d{3}\d{4}\d{4}'
like this i used but i need to check whether its between 8 and 10 less than 8 and more than 10 should give an error or notice!
I wrote a javascript function which will detect if the number is Australian Landline, or Australian Mobile, and format them accordingly.
It accepts +61 for landline and mobile, and requires Area Codes for landlines.
feel free to add to it if you think its missing functionality
function validatePhoneNumber(phone_number){
var formatted = "";
//remove all non-digits
phone_number = phone_number.replace(/\D/g,'');
//if number starts with 61, replace 61 with 0
if (phone_number.match(/^61/)){
phone_number = "0"+phone_number.slice(2);
}
if (phone_number.match(/^04/)){
if (phone_number.length === 10){
var formatted = phone_number.replace(/(\d{4})(\d{3})(\d{3})/g,"$1 $2 $3");
} else {
alert('Invalid phone number');
}
} else if (phone_number.match(/^02|03|07|08/)){
if (phone_number.length === 10) {
var formatted = phone_number.replace(/(\d{2})(\d{4})(\d{4})/g,"($1) $2 $3");
} else {
alert('Invalid phone number');
}
} else if (phone_number.length === 8){
alert('Please use Area Code for landline numbers');
} else {
alert('Invalid phone number');
}
//update
$("#phone").val(formatted);
}
You can use followin javascript to validate text field length.
var textBox = document.getElementById("phone_no");
if(isNaN(textBox.value)){
alert("Please inser a number as a phone number");
}
if(textBox.value.length < 8 || textBox.value.length > 10){
alert("Enter text length between 8 to 10");
}
First off, using the pattern attribute is not so well supported (see http://www.w3schools.com/tags/att_input_pattern.asp), so you should use javascript. A regex for a phone number has already been discussed at length here: A comprehensive regex for phone number validation.
Personally, I'd advise reading though the answer that suggests .* as a pattern.
You can use pattern '\d{8}\d?\d?' or \d{8}|\d{9}|\d{10}.
It worked for me
pattern="[0-9]{10}"
Requirement:
I am trying to restrict the input field to key in only numbers or numbers upto two decimal numbers only. If the user enters more than two decimal places, the input field must display only number upto two decimal places and removing all other. I am using regular expression.
Problem:
When more than two decimal places are entered in input field, all the decimal places are removed and showed. Problem is with regular expression.
Kindly please help me with forming a correct regex.
Code:
http://jsfiddle.net/h6kYh/
$(document).ready(function() {
$("#AmountField").bind("keyup change", function() {
var value = $(this).val();
var numericReg = /^d+(?:\.\d{0,2})?$/ ;
if( !numericReg.test(value) )
{
value = value.replace(/(?=\d*\.?)(\d{3})/g,"");
$(this).val(value);
}
});
});
It should be
var invalidNumericReg = /^\d+(\.\d{3,})$/;
var validNumericReg = /^d+\(.\d{1,2})?$/;
if( invalidNumericReg.test(value) )//has more than 3 decimal numbers!
{
value = value.replace(/^(\d+\.\d{2})\d+$/g,"$1");
$(this).val(value);
}
else if( ! validNumericReg.test(value) )
{
//invalid input
}
Try
var numericReg = /^\d+\.?\d?\d?$/ ;
if( !numericReg.test(value) ) {
value = value.replace(/^(\d+\.?\d?\d?)?.*/,'$1');
$(this).val(value);
}