This question already has answers here:
Number input type that takes only integers?
(25 answers)
Closed 2 years ago.
I am trying to restrict the user to type decimal point as below.
<b-form-input
size="sm"
type="number"
v-model.number="lots"
class="inputprice"
style="width:40%"
oninput="javascript: if (this.value === '.') return;"
>{{ lots }}
</b-form-input>
But this attempt not working. Anyone knows how can I do it inside on input attribute?
You can use parseInt to convert the input value to an integer as follows:
new Vue({
el:"#app",
data(){
return{
lots:0
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input
type="number"
v-model.number="lots"
class="inputprice"
style="width:40%"
oninput="this.value = parseInt(this.value);"
/>{{ lots }}
</div>
Related
This question already has an answer here:
Regular expression works on regex101.com, but not on prod
(1 answer)
Closed 2 years ago.
Currently working on regex / pattern in angular where i need to restrict the user to input only one minus and digit as per the below example.
-10
-10.00
10
This is what i have tried so far.
<input style="width: 65px;" ng-pattern="/^-?[0-9]\d*(\.\d+)?$/" class="form-control form-control-sm bg-light" type="number" [(ngModel)]="col.value" required>
I checked this pattern in regex.com this was working here but not in Angular can some one please let
me know what I am doing wrong here.
It seems that ng-patter works with angularjs and not angular so you should try angular patternValidator directive instead angular docs
You need to escape for javascript and regex. For me it worked like this.
<input style="width: 65px;"
pattern="^-?[0-9]\\d*(\\.\\d+)?$"
class="form-control form-control-sm bg-light" type="number" [(ngModel)]="myProperty" required>
Since in angular html is not actual html but will be transformed to javascript so you need to escape regex special escape sequences again so that JS could understand its part of regex. If you dont escape :
html is as follows and wont work
<input style="width: 65px;" pattern="/^-?[0-9]\d*(\.\d+)?$/" class="form-control form-control-sm bg-light" type="number" [(ngModel)]="col.value" required>
In dom it is as follows
<input class="form-control form-control-sm bg-light" ng-pattern="/^-?[0-9]d*(.d+)?$/" required="" style="width: 65px;" type="number" ng-reflect-required="">
For managing a simple input like in your case you can use template ref to check validity
import { Component, ViewChild, ElementRef } from '#angular/core';
#Component({
selector: 'my-app',
template:
`<input style="width: 65px;" #ref (keyup)="trigger(ref)"
pattern="^-?[0-9]\\d*(\\.\\d+)?$"
class="form-control form-control-sm bg-light" type="number" [(ngModel)]="myProperty" required>
<h1>{{ myProperty }}</h1>`,
})
export class AppComponent {
myProperty = 222;
#ViewChild('ref') ref: ElementRef;
trigger(e) {
console.log(this.ref.nativeElement.validity.valid);
}
}
Simple version without template ref
myProperty = 22;
showError = false;
onkeydecimalCheck(e){
const value = e.target.value;
console.log(value);
var regex = new RegExp(/^-?[0-9]+(\.\d+)?$/);
const flag = regex.test(value) ;
if (!flag) {
this.showError = true;
} else {
this.showError = false;
}
}
<input style="width: 65px;" type="number" (keyup)="onkeydecimalCheck($event)"
[value]="myProperty" required>
<span *ngIf="showError">Invalid data</span>
We can display some error. The issue with number field is that if you type + at the start eventhough it displays + if you check event.target.value will be empty
This question already has answers here:
How to force JS to do math instead of putting two strings together [duplicate]
(11 answers)
How to force addition instead of concatenation in javascript [duplicate]
(3 answers)
Closed 3 years ago.
Here are my code and its showing 00.000.000.00. I have changed this code another way then it's showing only the first digit of the result.
$(document).on('change', '.prc', function() {
var tSum = 0;
$('.prc').each(function() {
tSum += parseFloat($(this).val());
});
$('.totalprc').val(tSum);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="prc" value="0.00" />
<input class="prc" value="0.00" />
<input class="prc" value="0.00" />
<input class="totalprc" />
Any time I enter a number into an input that is 2 way bound to my object the value is converted to a string.
How can I force it or convert it to be a number?
It seems like it should be very simple and yet I have struggled to find an elegant solution.
I saw this solution of using a function to convert it but I don't see how that would work for 2 way data binding.
convert string to number angular 2 one way binding
<div class="row">
<mat-form-field class="custom-control">
<input type="number" matInput class="custom-control" [(ngModel)]="mpv.baseFare" required placeholder="Base Fare">
</mat-form-field>
</div>
<div class="row">
<mat-form-field class="custom-control">
<input type="number" matInput class="custom-control" [(ngModel)]="mpv.mileageRate" required placeholder="Mileage Rate">
</mat-form-field>
</div>
mpv is an object of class VehicleType I have my VehicleType class set up as follows. The number types are completely ignored, I guess because it is at run time so just non typed javascript.
export class VehicleType {
baseFare: number;
mileageRate: number;
}
UPDATE - CURRENT HACKY SOLUTION:
onSave(vehicleType: VehicleType) {
// Hack to convert string to number
vehicleType.bags = +vehicleType.bags;
vehicleType.baseFare = +vehicleType.baseFare;
vehicleType.mileageRate = +vehicleType.mileageRate;
vehicleType.passengers = +vehicleType.passengers;
this.vehicleTypeService.updateVehicleType(vehicleType.id, vehicleType).subscribe(result => {
It turns out that the order of the attributes on a matInput mater. This issue does not occur on a standard input only a matInput.
Does not work:
<input type="number" matInput class="custom-control" [(ngModel)]="mpv.baseFare" required placeholder="Base Fare">
Works:
<input matInput type="number" class="custom-control" [(ngModel)]="mpv.baseFare" required placeholder="Base Fare">
If you want to be able to modify the value when ngModel sets a new value then you're most likely looking at creating a get and set function. Example,
<div class="row">
<mat-form-field class="custom-control">
<input type="number" matInput class="custom-control" [(ngModel)]="baseFare" required placeholder="Base Fare">
</mat-form-field>
</div>
<div class="row">
<mat-form-field class="custom-control">
<input type="number" matInput class="custom-control" [(ngModel)]="mileageRate" required placeholder="Mileage Rate">
</mat-form-field>
</div>
get baseFare(): number {
return mpv.baseFare;
}
set baseFare(value: any) {
mpv.baseFare = pareseInt(value, 10);
}
get mileageRate(): number {
return mpv.mileageRate;
}
set mileageRate(value: any) {
mpv.mileageRate = pareseInt(value, 10);
}
That should do the job.
Update: you could just have value as any or both as any since you know the return type will be a number.
Sorry for the bad title, simple couldn't figure out how to explain my problem.
Let's say i have 4 of these fields, and not just one. I want to increment or decrement each input field. Each input field has a "+" and "-" that does incremental and decremental tasks.
I have setup a method that register the v-on click even to a method. But how do i get what input field it was incremented on, cause 'this' would return the buttons of +/-
normally i would just use jquery with .parent().find('.input-number'); but i feel like this is dirty, and excessive for such a small thing. most be a better approach?
This is my markup
<div class="form-group">
<span class="input-number-decrement" v-on:click="decrement()">–</span>
<input class="input-number form-control" name="pack1" id="pack1" type="text" value="0" min="0">
<span class="input-number-increment" v-on:click="increment()">+</span>
</div>
and looks like this
example of the field
any help would great, since i'm stuck at this part :)
I have created one javascript function for increment and decrement value by 1.
HTML
<div class="form-group">
<span class="input-number-decrement" v-on:click="inc_dec('dec')">-</span>
<input class="input-number form-control" name="pack1" id="pack1" type="text" value="0" min="0">
<span class="input-number-increment" v-on:click="inc_dec('inc')">+</span>
</div>
Javascript
<script type="text/javascript">
function inc_dec(flag){
var pack1 = document.getElementById('pack1');
var inc_dec_by = 1;
if(flag=='inc'){
pack1.value = parseInt(pack1.value)+inc_dec_by;
}
if(flag=='dec'){
pack1.value = parseInt(pack1.value)-inc_dec_by;
}
}
</script>
I am assuming above code is a vue component.
<div class="form-group">
<span class="input-number-decrement" v-on:click="decrement()">–</span>
<inputn v-model="value" class="input-number form-control" name="pack1" id="pack1" type="text" value="0" min="0">
<span class="input-number-increment" v-on:click="increment()">+</span>
</div>
In the script define a variable to hold the value.Then manipulate values using defined methods
<script>
export default{
data: {
value
},
methods: {
decrement: function (event) {
},
increment: function (event) {
}
}
}
</script>
This question already has answers here:
Substracting values on keyup using jquery
(3 answers)
Closed 9 years ago.
I have two textbox as follow:
<input id="amount" name="amount" type="text" value="0" />
<input id="discount" name="discount" type="text" value="0" />
I want substract discount from amount, and add result to another textbox. How can I do it?
$("#result").val(parseInt($("#amount").val(), 10) - parseInt($("#discount").val(), 10));
That should do it. jsFiddle here.
You can do this using JavaScript/Jquery
Suppose your third textbox is
Then your Jquery code will be
var vResult = parseInt( $('#amount').val() ) - parseInt( $('#discount').val() );
$('#result').val( vResult );