enter number in text box should be in decimal with two digits - javascript

I am trying to put value in text box with two decimal digits
example
by default it take .00 on entering number
I am using Angular , Reactive form with form Control .
I am sharing my code :
<input placeholder="00.00" (keypress)="convert($event)" formControlName='pendingDuesAmount' [(ngModel)]='pendingAmount' type="text" [ngModelOptions]="{standalone: true}" >
TS
pendingAmount : number = 0.00
convert(event): boolean {
this.pendingAmount.toFixed(2)
}

Related

Angular shift cursor in the beginning after type four digits

I need to implement a case when the user types 4 digits then the rest of the digits should be typed at the start of the input field.
For example, if the user types 1234 in the input field and after that type another digit 5 then that 5 will print at the start of the field 51234, and so on 651234.
I checked many examples but that are in javascript. I have to make it for angular
<form [formGroup]="form" >
<input formControlName="test" type="number" (keyup)="check($event.target.value)" name="bizs">
</form>
check(value){}

How to validate input for comma as decimal separator using JS?

I am currently using this to allow users to enter numbers, but this accepts multiple dots and commas and I'd love to restrict it to a more precise number entry, because God knows the wonders that users can do.
How can I restrict it to comma as decimal separator?
<input oninput="this.value=this.value.replace(/[^0-9.,]+/gmi,'')" value="">
Try following code:
<input onChange="this.value=this.value.replace(/[^A-Z0-9]+/ig, '')" value="">

Implementing commas and decimals in autonumeric.js

I have a form which I am trying to get working with autonumeric.js. One of the errors I am getting is that number is not supported by autoNumeric. When I change the input type to text all inputs automatically auto fill to whatever number I am keying in. I am basically trying to start with adding commas and decimals, before i get into currency. I am a little confused as to where to go from here. This is my HTML
<form id="form1">
<h3>Lifetime Value Calculator</h3>
<input value="" type="number" class='num1'/>
<input value="" type="number" class='num2'/>
<input value="" type="number" class='num3'/>
<input value="" type="number" class='num4'/>
</form>
This is my script
var autoNumericInstance = new AutoNumeric('.num1, .num2, .num3, .num4', AutoNumeric.getPredefinedOptions().numericPos.dotDecimalCharCommaSeparator);
$('.num1, .num2, .num3, .num4').on('keyup', function() {
$('.num1, .num2, .num3, .num4').val(autoNumericInstance.getNumericString());
});
I have made some progress. I was able to get commas and decimals for my first input field, but only commas and NO decimals for my last input field, using this script
`
$('.num1, .num4').each(function() {
var autoNumericInstance = new AutoNumeric($(this)[0],AutoNumeric.getPredefinedOptions().numericPos.dotDecimalCharCommaSeparator);
});`
So now I need to figure out why the decimal is not working for my fourth input
What do you want to achieve exactly?
If you want to have 'basic' input with the usual comma as the digit group separator and the dot as the decimal point, then just use:
new AutoNumeric.multiple('#form1 input');
On the other hand, if you only want positive values, use:
new AutoNumeric.multiple('#form1 input', { minimumValue : 0 });
Lastly you were mentioning currency; I would suggest using on the the predefined currency format, and if you do not find yours then 1) ask for it to be included in the AutoNumeric library using the github issues, and 2) just configure it as you wish, for instance like:
new AutoNumeric.multiple('#form1 input', { currencySymbol : '€' });
Do note that you can fiddle with the options pretty easily using the official autoNumeric configurator.

How to use maxlength for decimal

My database table column length is (13,3),
I'm using HTML maxlength for normal text and number text boxes.
But i cannot use that for decimal number validation, is there any way i can use maxlength property of HTML to validate this?.
You could use the HTML text input pattern attribute.
For example :
<input type="text" placeholder="0.000" maxlength="14" pattern="\d{1,10}(?:\.\d{1,3})?$" />
This pattern will validate these :
1
1.001
1234567890
1234567890.123
And will through error for these :
1.
1.1234
12345678901
.123

Phone Number Validation Angularjs

I am having a issue validating phone number. The phone number is a 10 digit string that should be populated in a three input field
1st input field - have only 3 digits only ( requires, can accept only numbers and max length 3)
2nd input field - have only 3 digits only ( requires, can accept only numbers and max length 3)
3rd input field - have only 4 digits only ( requires, can accept only numbers and max length 4)
and tab should be moved to next input field, when maximum number of characters have been implemented in the first one
the fields should be red, when none of the above conditions are not meeting
<label for="phoneone" aria-label="Enter First 3 digits of your phone no."><input id="phoneone" type="number" required name="phoneone" class="phone-text-box" ng-model="user.phoneNumbercodeone" ng-minlength="3" ng-maxlength="3" maxlength="3" ng-pattern="/^[0-9]*$/"></input></label>
<label for="phonetwo" aria-label="Enter second 3 digits of your phone no."><input id="phonetwo" type="number" required name="phonetwo" class="phone-text-box" ng-model="user.phoneNumbercodetwo" ng-minlength="3" ng-maxlength="3" maxlength="3" ng-pattern="/^[0-9]*$/"></input></label>
<label for="phonethree" aria-label="Enter last 4 digits of your phone no."><input id="phonethree" type="number" required name="phonethree" class="phone-text-box" ng-model="user.phoneNumbercodethree" ng-minlength="4" ng-maxlength="4" maxlength="4" ng-pattern="/^[0-9]*$/"></input></label>
<div class="clearfix" ></div>
how would i achieve the above validation conditions using input html tag
You should use input pattern validation. This can be done using the ng-pattern directive:
NgPattern sets pattern validation error key if the ngModel value does not match a RegExp found by evaluating the Angular expression given in the attribute value. If the expression evaluates to a RegExp object, then this is used directly. If the expression evaluates to a string, then it will be converted to a RegExp after wrapping it in ^ and $ characters. For instance, "abc" will be converted to new RegExp('^abc$').
Note: Avoid using the g flag on the RegExp, as it will cause each successive search to start at the index of the last search's match, thus not taking the whole input value into account.
There are a couple of small issues with your code. Specifically I am looking at ng-minlength="3" ng-maxlength="3" maxlength="3" ng-pattern="/^[0-9]*$/". You can achieve your number validation using the html5 properties of min and max on your input. So your input would look something like this:
<input id="phoneone" type="number" name="phoneone" class="phone-text-box" ng-model="user.phoneNumbercodeone" ng-minlength="3" ng-maxlength="3" min="100" max="999" />
And then you can run validations against that using something like this:
<div ng-show="phoneForm.phoneone.$invalid && phoneForm.phoneone.$dirty">
<div ng-show="phoneForm.phoneone.$error.minlength || phoneForm.phoneone.$error.maxlength">This must be a 3 digit number</div>
</div>
Of course exchanging out phoneForm for the name of your form.

Categories