I sunk way too much time into fixing this and i'm still not too sure what to make of it.
The issue:
I have an input tag <input type="number" max="{{ theMax }}"> with a dynamic max value that should be set on the template load.
The max tag will prevent you from going above that number when you click the little up/down arrow icons in the input box, but not if you type it in.
On my local, if I typed in a number higher than the maximum value I was still able to read that value from the input fine.
On my server however (which has the exact same codebase), when I typed in something above the value and queried the input for it, it would give me undefined.
Both behaviours could make sense (I'm not sure what the actual spec is supposed to be with the max attribute) it's the oddness of the inconsistency that bewilders me (same browser and everything).
At first i'm thinking it was some kind of race condition and perhaps because {{ theMax }} is dynamically set perhaps the live code was slower at fetching it or something, but the fact is it still recognises the max value because the input value only returns undefined if you put something it it that is above the max.
What could explain this inconsistency? Is there something obvious or perhaps something in the rest of my code that's having this effect?
Note: yes, same browser used for both tests.
Thanks
I would not recommend to use dynamic max value because ng-max doesn't watch the change of value after link(or compile) function.
If you need to use dynamic max value, this post could help you.
Related
I`m trying to implement a range slider with ng2-nouislider into a reactive form.
I want to give the opportunity to split the range from 1 to 100. Maybe three ranges and first is 20, second is 50 and the last is 30. All together it is 100. And the user should be able to add more ranges and to change them.
I have a reactive form in my project and it is not possible for me to change to a template driven one.
Here is my stackblitz for the ngmodel variant that works like I want:
https://stackblitz.com/edit/ng2-nouislider-with-form-8vbrt4?file=src/app/app.component.html
And here is the stackblitz for the reactive form variant:
https://stackblitz.com/edit/ng2-nouislider-with-form-g8zpq4?file=src/app/app.component.html
In this documentation it sais the nouislider component has to be destroyed to add new handles:
https://refreshless.com/nouislider/more/#section-update
But I tried it also without destroy via the destroy method of nouislider in the ngmodel variant and it worked also well. The destroy via the if condition seems to be enough.
My problem is in the reactive form variant. If you try this example and push the plus button, you can see, that the handle is added, but the forms value is not correct after the reinitialization of the slider in the dom.
The value seems to be only for a short time correct, and then the array loses the last value.
In other words. If the value is [33,66] and should be [25,50,75] after the button click, the value is only very short correct, and the it is only [25,50].
It seems that the slider is not really destroyed and remembers the old array length of the start value. And after reinitialization it overrides the form value again.
So please.....
Is anybody able to help me here? I can not see any error in my code here.
Thanks in advance =)
I'm trying to set some validation for an input field. It is working fine everywhere except on iOS.
Here's some example code but the are two points to consider:
It must be a type="text" input because I need to allow the user to type
special characters like - and /
I made some regex to handle the input validation but for the sake of
simplicity I'm omitting it from the snippet.
https://codesandbox.io/s/youthful-morning-gjjsq
The original code is from a React project with Redux so I reproduced the same logic with both state management from React and from Redux to make clear the problem is not coming from neither of them. In the example I set the if-else conditional to allow any value less or equal to 20 to be displayed in the input fields and, as I said, it works OK. Nothing fancy, it's just to demonstrate that when the value is greater than 20, or when is not even a numeric value, the input field won't get updated. But whatever the reason, for iOS when, specifically, the dash (or minus) character is inserted in the input field the other characters get erased. Try typing 2- or 20- and the characters will disappear. If I try to type other character like / or ?, whatever, the values are not erased though. The desired behavior is to keep the value untouched (i.e. 2 or 20), not delete it.
The problem doesn't happen on Windows and on Android; it's only on iOS no matter the browser (not sure if it happens on Mac too). I tried return false, e.preventDefault(), e.stopPropagation(), e.nativeEvent.stopImmediatePropagation(). None of these worked.
Does anybody could help me with this? Again, the code I provided is just an example based on the original code which I can't reproduce here. I can clarify better if needed.
I have an input with type=number which I want to have the entire number selected upon the user touching the input. How would I go about doing this?
I'm getting errors that type=number doesn't support selection - I'm finding this difficult to get around. If anyone can handle this in terms of an Angularjs directive, that would be ideal.
Thanks,
Try using input type="tel". It may have been fixed I've never gone back to explore but at one point in time Angular and type="number" did not combine well at all.
It has to do with the way the browser handles its own processes and a collision with Angular doing the same.
I have an application with an input field that takes a dollar value. I need to change the way this dollar value displays so that the number is formatted with a $ and commas, like $5,550.00 if the user just enters 5550.
I found a way to do this, but doing so causes all hell to break loose in the code that uses the value from this field--it does a bunch of stuff, including database updates that break if given $5,550.00 instead of 5550.
There is a TON of underlying code and I am not empowered to go fix it all. I need to figure out a way to display this value to the user as $5,550.00 but keep the underlying value as 5550.
Any suggestions?
Use 2 text inputs. A "façade" one that the user sees, and a "real" one which is actually submitted to the server with the form. When the user enters text into the visible input, you can use JavaScript to set whatever corresponding value you want into the "real" (hidden) input. That effectively decouples the displayed value from the submitted one. You can even use a plugin such as jQuery Masked Input to do the front-end number formatting for you.
Make sure to only apply this when JS is enabled in the browser, otherwise your form will be broken with JS disabled.
If you are talking about an HTML form, I would submit the form using javascript.
You could revert the value back to unformatted before submitting the form.
I'm a new user to knockout.js and so far have been very impressed with basic use.
I want to be able to auto calculate a field (yr2 Expense) based on a previous field (yr1 Expense), but also allow the user to change the auto calculated field. This auto calculated field is then used for another calculation (Total Yr2). I've been trying to do so with this jsfiddle, but have had no luck so far. I can't find any info in the examples on how to do this.
I first tried making yr2 Expense an observable, which does not allow for auto calculation. I then tried making yr2 Expense a computed, which does not allow for Total Yr2 to be updated with user input. Is what I'm trying to do not possible? I would think this would be common in finance calculation forms, which is what I'm doing this for.
First of all, variable names should be easy to understand and intention revealing. There is no benefit to obtuse or abbreviated names, like the ones used in your fiddle. They are confusing, and this adds difficulty to code maintenance. If you plan to minify your js later then the names wont matter anyway. If you need to read your code later, having full, easy to understand names helps tremendously.
There are two ways to accomplish what you are after.
One method would be to use subscribers to alter the calculation of the observable after a change. See this, near the bottom of the page. Here is a fiddle demonstrating this method. For this example, I recommend this method.
Note: I am leaving off valueUpdate so that recalculations only occur when the user is done typing. If you use afterkeydown, it will recalc early, causing issues. Try pressing [Enter] when you want it to recalc.
The second method is to use writable observables (Second header, 1/3 down the page) to make computed observables that have read and write methods. I don't think this method is as good a fit for this specific example, but the example in the linked KO documentation should give you an idea of when it works well.