I have below input control in my html
<input id="inputcntrl" type="text" value="{{(mynumber) | number:'2.2-2'}}" [(ngModel)]="mynumber" (blur)="validatemynumber()" />
As you can see I am formatting input text to make sure it has two decimal values. It does work correctly when user enters the value in input box. onBlur event I am checking the value entered by user and if it is not within the range (min >mynumber>max) then I am setting mynumber with min value. Problem is mynumber displays min value with no formatting. forex: If min valule is 10 then input box should display 10.00 but it displays only 10..any idea how can I fix this? I am using angular2
Update: I think problem in my case is with somehow related to binding..When I update mynumber from my component and the new value is reflected in UI but its formatting is lost. mynumber variable is of type number. I need to find a way to update value with formatting from component
Try mynumber.toFixed(2)
<input id="inputcntrl" type="text" value="{{mynumber.toFixed(2)}}" [(ngModel)]="mynumber" (blur)="validatemynumber()" />
Here is a reference documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed
If you want to format mynumber at your component with an angular way, try using built-in DecimalPipe at your component(the same as number pipe used at your template).
import { DecimalPipe } from '#angular/common'
this.mynumber = this.decimal.transform(this.mynumber, '2.2-2');
Plunker demo
Related
I am trying to pre-populate a time field on an input form, and I'm getting the field from a database. I was successful in finding how to do this with the date field by putting this in my value attribute:
"value="{{shipment.pickup_date|date:'Y-m-d'}}">"
Is there a similar conversion I can make with a time value? I've tried "HH:mm:ss", "H:m:s", to no avail. I can see in via the Chrome Elements tab that the value is getting passed properly, it's just not getting displayed in the field.
You can provide a value to the input tag in your template by passing the shipment's pickup_date value to the time filter with the right format. Providing the right format is key here, since the additional a.m. in your current value is not accepted. As a result, type="time" expects something like H:M; where H is the hour in double digits, and M is the minutes in double digits, as well. This means that you should change your code to the following:
<div class="">
<input type="time" name="pickup_time" value="{{ shipment.pickup_date|time:'H:i' }}">
</div>
Here, H:i is the format that converts your time value to something like H:M.
Have a look at the following screenshot. You can see that the text input field is empty, yet its value attribute is set to "b".
You'll also notice in the Properties tab, under input, that value here is set to "". Why are they different? What does this mean?
Could this be related to the fact that the input was rendered by React?
If it helps, here is the jsx responsible for this element (redacted):
return (
<td
key={field._id}
className={`oldField ${colPos}`}
>
<input
type="text"
defaultValue={value}
onChange={this.changeOldField(record, field)}
/>
</td>
)
It seems that you are changing the defaultValue based on something from the state. The defaultValue prop should be set only once and not changed later on, because any more changes will be ignored by React. If you want to change the value based on state you should use the normal value prop. Otherwise, if you want a predefined value to appear to the user and at the same time control the input when it gets changed, you can either use some logic in your code that handles both onChange and the code in your component that wants to automatically change the value, or possibly place it in the placeholder prop, which will give you something like what you want.
I'm using standard HTML TextBoxFor helpers in an MVC5 project and wanted to set a textbox to accept numeric values only.
So I've set the type to be number.
#Html.TextBoxFor(model => model.PP_IMP_M1, "{0:0}", new { #type ="number"})
I'm not sure what the functionality of the HTML input type=number is supposed to be but when I type only letters in the textbox and tab out, the textbox clears itself as the value was not numeric. This is expected and correct.
However, if I type the first character as a number and follow this with random letters then the mixed text value remains in the textbox. I know the character 'e' may have been acceptable but I'm entering things like '12hgf' & '45dddd' and the textbox accepts the value after I tab out.
Is this the expected behaviour for an input with type set as number?
I was hoping the type=number would only accept numeric values without me having to use javascript or jquery.
Any help on this issue would be appreciated.
Shuja
I would like to retrieve an value from a different input to my button's input value.
I have an input, which is hidden and an input in which my costumers can change the value as they desire. I would like to retrieve this value and put into my hidden inputs value, when clicked on a button.
I've been adviced to use a OnSubmit code, but I'm not very familiar with it and can't seem to get it working, so I was hoping to meet someone who may help me.
The input in which I would like to retrieve the value from my other input is coded as shown:
input type="hidden" name="quantity"
The input in which i would like to retrieve value FROM is coded as shown:
INPUT TYPE=TEXT NAME="PROD_VK_1.4" SIZE=3 MAXLENGTH=3 value=1 onChange="CalculateTotal(this.form)"
You can retrieve value from the above input tag using the js function getElementsByName
It returns a collection of elements of the name specified.So if there is only one element you can access as the zeroth element by accessing zeroth index as if it is an array.See the below example
var input_val = document.getElementsByName("PROD_VK_1.4")[0];
To put the value to the hidden input use the following code
document.getElementsByName("quantity")[0].value = input_val;
More on getElementsByName
You should have an ID attribute on your hidden variable; suppose it is id="quantity". Also an ID attribute on the sending data will make things easier; make it "PROD_VK_1.4". Then, if you want the hidden variable to get a copy of the visible variable when the form is submitted, you'd code something like this:
<form action="whatever" onsubmit="moveData();" >
the moveData function would look something like this:
function moveData() {
document.getElementById("quantity").value =
document.getElementById("PROD_VK_1.4").value;
}
I haven't tested this, but if there are no fumble-finger errors, it ought to work.
If you didn't want to hook this to the submit event, perhaps you could edit your question a bit.
I am curious... why do you want to do this when you could just use the value of the original input element when the form is submitted?
If both of the <input>s have ids, you can do this:
document.getElementById('to').value = document.getElementById('from').value;
Here is an example:
http://jsfiddle.net/b2eDj/5/
In my HTML markup I have an input of type text which has a two-way binding (using ng-model) to a decimal property. The object which contains this decimal property is fetched using a Breeze query on the client side. I can see that the Breeze query has successfully fetched the data and can see the initial value of the property (i.e. 1.25) in the text input. If I delete the decimal point and try to type it in again it will not allow me to do so and at this point I can only type in a number - effectively what I end up with is an integer value.
Can anyone tell me if Angular or Breeze is doing something behind the scenes that is limiting a text input to only being able to accept numbers instead of any text. I've inspected the input element in question in the browser to see if anything extra was "bolted on" that may have caused this but nothing jumps out. The "fix" or workaround would be change the input type to number and set the step attribute to "any" but nevertheless I would still like to understand the cause so any help will be greatly appreciated.
Thanks
I'm having the same issue and I think the problem is that due to the two-way binding the value is expected to be valid at any given moment. Apparently "1." is not a valid number so it doesn't like it. If you type "125" and then go back and insert the "." it will accept "1.25".
My current solution is to use debounced updates:
<input type="{{type}}" ng-model="ngModel" ng-model-options="{ updateOn: 'default blur', debounce: { default: 1000, blur: 0 } }">
If you do not want timeouts at all you could use just:
ng-model-options="{ updateOn: 'blur' }
More on this here: https://docs.angularjs.org/api/ng/directive/ngModelOptions
Depending on your localization settings, the numeric input field may accept only numbers and commas (not decimal points). As the validation is done on unser input, angular is able to set the value with the decimal point without failing.
By the way, why would you want to use breeze, when AngularJS has all you need to link your fields to the model?