If I use type='text' for input: ng-pattern works and ng-max validation doesn't work;
If I use type='number' for input: ng-pattern doesn't work and ng-max validation works; (I can enter unlimited count of zeroes at the begining and in the end)
Example:
<input name="input" type="number" placeholder="0.00"
data-ng-model="example.value"
data-ng-max="100"
data-ng-pattern="/^0(\.\d{1,2})?$|^[1-9]\d{0,14}(\.\d{1,2})?$/"
data-ng-required="true"/>
http://plnkr.co/edit/hv3qrTZzBy8RlPGT8Snv?p=preview
What is the recipe for this problem?
Please take a look at this Plunker and see if it works now.
http://plnkr.co/edit/r6FiR5ZSnnDpcJW2893U?p=preview
<input
name="input"
type="number"
placeholder="0.00"
data-ng-model="example.value"
max="100"
data-ng-pattern="/^0(\.\d{1,2})?$|^[1-9]\d{0,14}(\.\d{1,2})?$/"
data-ng-required="true"/>
It was a really small change, but sometimes that's all it takes. :)
According to the official documentation you should you [max="string"] instead of "ng-max".
https://docs.angularjs.org/api/ng/input/input%5Bnumber%5D
Related
I trying to use JMask for money mask, its work good, but when i click on other input, my field money that was for example "1.234,56" became "123.456" how can i fix it?
My field:
After after put value on other field
Automatically my comma broken
My code:
<label>Custo: </label>
<input type="text" name="" v-model="vehicle.cost" class="form-control money" placeholder="Custo"><br>
Documentation
I have used input type = "number" for displaying only a numeric keyboard. It works fine in android, but not in iOS. Is there any other way to do that?
What I actually want is an input box that only allows 0 to 9 and the max length of input is 1.
Please let me know. Thanks in advance.
<input type="number" maxlength="1"/>
You can use pattern: pattern="[0-9]*"
So: <input type="number" maxlength="1" pattern="[0-9]*" />
<input type="text" pattern="\d*">
Or you can use a plugin
https://market.ionic.io/plugins/ion-digit-keyboard
Use type="tel"
<input type="tel" />
I'm working on an angular project where i perform calculations on the page. In the textfield where i put the final results, when i get it an ng-model that answer fails to load. When i take out the ng-model, the answer appears.
But i want it working while it have an ng-model="total" because i will send the total value to the database. With the below script, it works
<input name="price" type="text" id="price" ng-model="price">
<input name="quantity" type="text" id="quantity"ng-model="price">
<input name="total" type="text" id="total" value="{{.price*quantity}}">
But with this
<input name="price" type="text" id="price" ng-model="price">
<input name="quantity" type="text" id="quantity"ng-model="price">
<input name="total" type="text" id="total" value="{{.price*quantity}}" ng-model="total">
it fails to works. The answer doesn't appear in the textbox
Try this instead:
<input name="price"
type="text"
ng-model="price" string-to-number>
<input name="quantity"
type="text"
ng-model="quantity" string-to-number>
<span>{{ price * quantity }}</span>
I'm not sure why you're trying to put the calculated value into the 3rd input, but if you are, you'll want to use ng-model-options to tell the total ngModel that it's to treat that value as a getter/setter - https://docs.angularjs.org/api/ng/directive/ngModelOptions
Also note the string-to-number directive. You're dealing with strings in the input. So in order for interpolation to work, you may need to add those.
edit
here is a working example of how I think you were trying to allow an override on the calculated value. You can enter another value in the total input and hit enter to see it working. This uses the ng-model-options - http://codepen.io/jusopi/pen/XKQzzv
Below is my textbox:
<input type="number" id="payement-textbox" name="payment-textbox" min="1" max="100000" maxlength="9" class="payment" placeholder="--" value=""/>
This works fine in Google Chrome. But when I try to enter a floating number in mozilla firefox, it creates a red border around the box. Is there any way to stop firefox to validate float number?
Just specify step attribute.
<input type="number" id="payement-textbox" name="payment-textbox" min="1" max="100000" maxlength="9" class="payment" placeholder="--" step="0.01" value=""/>
Hope this helps.
Chrome is a lot more tolerant to avoid programming errors like this. as Huxdit said, you have to include a step attribute
<input type="number" step="0.01" />
How to provide a custom validation for a number using HTML5
HTML
<input class="required" id="field" type="number" maxlength="3" pattern="([0-9]|[0-9]|[0-9])" name="cvv"/>
Here it is allowed to type in only one number. But max length doesn't work here.
Is there another solution ?
use max attribute of the input number
<input class="required" id="field" type="number" max="999" pattern="([0-9]|[0-9]|[0-9])" name="cvv"/>
or even without pattern as
<input class="required" id="field" type="number" max="999" min="-999" name="cvv"/>
As per the documentation, the maxlength works only if the value of the type attribute is text, email, search, password, tel, or url. I suggest you should use javascript validations for this particular case.
For a very simple example please refer to this link.