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">
Related
I'm implementing a text box in HTML with the MaxLength attribute. I want it to be 4 digits only but ignoring decimals. So a user should only be able to write a number from 0 to 9999. however, I want them to be able to add decimals like 9011.22. What would be the best way to go about implementing this? Will it need some kind of javascript?
here is my HTML tag:
<input type="text" name="lastname" value="Mouse">
Use the number type, it will allow you to set a min and a max. You can then use the step attribute to control the number of decimals.
You can add the required property to make this field required.
You can use this.checkValidity() in the onblur event to validate before submitting.
<form>
<input type="number" name="lastname" value="Mouse" min="0" max="9999" step="0.01">
<p><input type="submit" value="Submit"></p>
</form>
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">
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" />
I have a form that has one optional input and 3 required input fields. For the optional input I have the below markup:
<input type="number" placeholder="0" min="0" max="20000" step="100" data-parsley-validation-threshold="1" data-parsley-trigger="keyup">
This does not fire the validation if I have type in letters or any other characters. It does validate for min and max values. If I put required attribute it does seem to work but I don't want that. I also tried defining a pattern as below:
data-parsley-pattern="^[0-9]*$"
None of them seem to work. Any ideas?
You can use data-parsley-type="digits". Notice the use of type="text" instead of number.
This works if you only want to allow digits (not floats).
<input type="text" placeholder="0" min="0" max="20000" step="100"
data-parsley-validation-threshold="1" data-parsley-trigger="keyup"
data-parsley-type="digits" />
If you want floats, you can use data-parsley-type='number':
<input type="text" placeholder="0" min="0" max="20000" step="100"
data-parsley-validation-threshold="1" data-parsley-trigger="keyup"
data-parsley-type="number" />
my code is as follows:
<input type="number" min="4.50" max="9.90" id="cpi" name="cpi" required="required" title="CPI" class="formfield3" />
CPI is a float value. But if I open it in browser and input value which is the float number such as 7.89 then it shows message of 'Invalid Value'. How to solve it?
Set step="any"
<input type="number" min="4.50" max="9.90" step="any" id="cpi" name="cpi" required="required" title="CPI" class="formfield3" />
The number type has a step value controlling which numbers are valid (along with max and min), which defaults to 1. This value is also used by implementations for the stepper buttons (i.e. pressing up increases by step).
Simply change this value to whatever is appropriate. For money, two decimal places are probably expected:
<input type=number step=0.01 />
(I'd also set min=0 if it can only be positive)
As usual, I'll add a quick note: remember that client-side validation is just a convenience to the user. You must also validate on the server-side!