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
Related
I am working on an Angular 2 project, where I am using forms and validation and have come to the following problem. I have a page with 3 fields:
height
weight
BMI
I would like ALL 3 fields to be in my form so I have done the following:
<input name="height" type="text" class="form-control" formControlName="height">
<input name="weight" type="text" class="form-control" formControlName="weight">
<input name="bmi" type="text" class="form-control" formControlName="bmi">
So far this works fine. Although, I want BMI calculated automatically. I have a function detecting changes on the two fields (height and weight) and calculates the BMI and outputs it in the BMI input field. This works as intended as well.
HOWEVER, I would like to disable the BMI input field in order to prevent the user from being able to type anything. So I have the 3 following criteria:
The input field here meant to serve as a read only field for the user.
I also want the BMI to be part of formgroup which I send to my database when all 3 fields are valid.
(optional, but very much wanted) I want the BMI field to be an input field with the result from height and weight as I have implemented it, not as plain text.
I have tried putting a [disabled]=true tag on the BMI input field which doesn't work and gives me a warning that I should add the disabled tag in the formgroup. When I do this or use this command: this.myForm.controls['BMI'].disable(); it DOES disable it as intended, but also removes it from the formgroup. This means when I submit my formgroup only the value of height and weight is sent, bmi is left out.
How can I do this?
Any help is greatly appreciated!
Have you tried placing a readonly attribute on the input?
<input name="bmi" type="text" class="form-control" formControlName="bmi" readonly>
Are you using some kind of UI framework at all?
http://semantic-ui.com/collections/form.html#read-only-field
formGroup.getRawValue() will return even the disabled fields,
Source
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 have a decimal number input field on a modal form in which I want make sure the user inputs a value less than another base value in my application like below.
<input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" required max="data.baseNumber" />
But somehow the ng-max does not seem to trigger this validation and set the input box invalid. What could I be missing?
I would like to keep the type to be text so the up and down arrows are not displayed. And user can enter 4 or 5 digit numbers with decimal places.
Maybe the question should be what else can I use instead of ng-max that the value is validated against the base number.
Sample plunker
http://plnkr.co/edit/9SAgqkjOlqUEHXhcyaqB?p=preview
Try changing the input type to number instead of text.
The max and min attributes works with the following input types: number, range, date, datetime, datetime-local, month, time and week.
<input name="mainInput" type="number" size="10" ng-model="data.baseNumber" ng-max="3" required/>
To see the style changes add CSS rule
.ng-invalid{
border: 1px solid red;
}
Plunnkr
Your program has one error also with that.
TypeError: Cannot read property '$valid' of undefined
match the name of the form, you did mismach as numberForm, modalForm
Aslo make the field as number as type
Should be
<input name="modalInput" type="number" class="form-control" size="10" ng-model="data.myNumber" required max="data.baseNumber" />
If you want to keep type="text" I think you can not use ng-max to validate text type. So you can create an event for the input ng-change="change()"
<input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" required ng-change="change()" />
The change() function to check max value for you when user enter
$scope.change = function(value) {
if (value> maxValue){// Do something here}
};
I need to validate a text box.user should not enter any mail id and also no numbers lengthier than 10..Please give your suggestions
As everyone else is commenting, please try to do some research before posting your question, as all of the below answers have been taken from this site's previous answers only.
Your query can be divided into two parts -
Email Validations
You can find email validation scripts already answered here and here on StackOverflow.
For PHP server-side validations, taken from here.
function validateEmail($email) {
return (bool) stripos($email,'#');
}
All the above functions will return true if the text entered is an email. So you might probably need to check for a false condition as you do not want email addresses to be entered.
Number Validations
Similarly, the check for numbers not being entered more than 10 characters, you may use:-
Simple
Javascript validation can be found here
However, there are still some unhandled cases in your question - What happens when someone enters normal text but greater than 10 characters? Should this be allowed?
Ideally it should as it is not an email, it is not a number greater than 10 digits?
<label>
Student Mobile no :
</label>
<input type="text" name="country code" value="+91" size="2"/>
<input type="tel" name="phone" size="10"/> <br> <br>
<label>
Guardian Mobile no :
</label>
<input type="text" name="country code" value="+91" size="2"/>
<input type="tel" name="phone" size="10"/> <br> <br>
<label for="email">Email :</label>
<input type="email" placeholder="Enter Email" name="email" required>
Just use either maxlength for text type input attribute inside the input tag of HTML forms or use size attribute for phone type input attribute the same.
For the email validation use type = "number" attribute in the input tag of HTML forms.
Please refer to the code above.
Today my challenge is this:
I have two inputs and a button:
Both inputs are date picker types. So When I pick a date from first input (for example I choose 11/19/2013) I want the second input to auto-complete to a one day later value. So the second one must pick 11/20/2013 automatically when I click the first input. I use these inputs to calculate a price(in my Magento store).
Below is the structure of my html (just a skeleton)
<div class="select_grid">
<input type="text" placeholder="mm/dd/yyyy" autocomplete="off" name="from" id="from" class="hasDatepicker">
<input type="text" placeholder="mm/dd/yyyy" autocomplete="off" name="to" id="to" class="hasDatepicker">
<input type="submit" name="Submit">
</div>
If you're happy to use JQuery You want to set something to the onChange handler of the from field.
Something like:
onChange="$('#to').attr('value',$(this).val());"
You'll have to modify it slightly. That syntax as it stands will just copy the value across. You'll need to use the javascript or jQuery date function to increment by one day/week etc.
An example of doing this is in this overflow question: Add +1 to current date