I am using the official AngularJS UI-Mask https://github.com/angular-ui/ui-mask and trying to figure out how I can create a mask for currency USD.
I want the user to be able to put $00.01 to like $9,000,000.00 or whatever the desired max is.
I currently have: <input type="text" ng-model="greeting" ui-mask="$99.99" class="form-control input-lg" style="width:50%" />
That limits me to $99...
Here is a live demo: http://plnkr.co/edit/5ErV11uGVxJFmD24K2jk?p=preview
You can use input number.
<input type="number" min="0.99" max="9000000.00" ng-model="greeting"
class="form-control input-lg" style="width:50%" />
Related
Using
<div class="ui-g-12 ui-md-12">
<input
id="licenseForEdit.issuedDate"
type="date"
name="licenseForEdit.issuedDate"
pInputText
placeholder="License Issued Date"
[(ngModel)]="licenseForEdit.issuedDate"
required
[class.field-error]="form.submitted && !licenseForEdit.issuedDate"
/>
</div>
I get:
<input _ngcontent-atp-c10="" id="licenseForEdit.issuedDate" name="licenseForEdit.issuedDate" pinputtext="" placeholder="License Issued Date" required="" type="date" ng-reflect-required="" ng-reflect-name="licenseForEdit.issuedDate" ng-reflect-model="2019-01-01T00:00:00" class="ng-pristine ng-valid ng-touched">
Yet, the input field remains:
How do I get the Model's value to display in the input box? I suspect that it's a databinding issue, but...
First please check if the format is correct.
Find the reference for MDN here.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date.
In case the value needs to be transformed for display purpose please use pipe.
https://angular.io/guide/pipes
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'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
I'm trying to control my polymer text box with input type text, this textbox is being used to receive a users Phone number
<paper-input
name="phone"
id="phone"
value="{{Request::old('phone')}}"
label="Phone Number"
aria-disabled="false"
class="x-scope paper-input-0"
style="text-align: left"
required auto-validate error-message="Phone Number cannot be Blank!">
<!--Text area to obtain phone number -->
<input type="text" is="iron-input" min="10" maxlength="10" size="10"/>
</paper-input>
what i'm trying to do with this is actually use javascript with polymer to limit this text box input to simply just numbers with a minimum input requirement set by me.
I had a couple of rough attempts at it but i'm fairly new to polymer so none of the approaches i took worked.
any tips would help !
thank you !!
<paper-input> is not designed to wrap a regular <input /> element. You would use <paper-input-container> for that.
In your case, use the paper input to limit characters directly:
<paper-input
name="phone"
id="phone"
value="{{Request::old('phone')}}"
label="Phone Number"
aria-disabled="false"
class="x-scope paper-input-0"
style="text-align: left"
required auto-validate error-message="Phone Number cannot be Blank!"
minlength="10"
maxlength="10"
size="10">
</paper-input>
I want to make text field in currency format with 2 decimal place.
Problem is :- after currency format my value is saved first digit in db instead of full value.
Here is code:-
html:-
<?php $itemcost=$item->price;?>
<label for="item-price" class="required item-dollar">$</label>
<input type="text" class="form-control" required="required"
value="{{number_format($itemcost)}}" id="item-pricing"
name="price" placeholder="Item Price">
Please advise me any solution.
It is not clear if you are having difficulty saving currency to the database or displaying it
You need to store the value in a field that accepts decimals/floats (e.g. decimal(10,2)
You are also using number_format() without a second argument which defaults to no decimal places, you should use number_format($itemcost, 2) for two decimal places
<?php $itemcost=$item->price;?>
<label for="item-price" class="required item-dollar">$</label>
<input type="text" class="form-control" required="required" value="{{number_format($itemcost,2)}}" id="item-pricing" name="price" placeholder="Item Price">
http://php.net/number_format