Fighting a little bit of a battle here. I have an HTML5 SPA app based on John Papa's methodology. I have a series of input boxes that are supposed to accept positive/negative real numbers.
Similar to here, when a user types the first '-' key as part of a negative number, either breeze (1.5.2) or angularjs (1.3.15) wipes it out because it's not a valid number at that point. Per the post, I added to the input the ng-model-options:
<input
ng-model-options="{ updateOn: 'blur' }"
ng-model="rdg.Reading.ManualValue"
step="any" type="number"/>
and that helps, but the problem is that there are usability issues, as was mentioned in that post. Previously, the moment pressed the first key, the view gets notification that something has changed and all is well. Now you actually have to leave the control, which could lead to confusion.
There was a second suggestion, namely adding:
ng-model-options="{allowInvalid: true}"
Which sounded conceptually way better, but this did not have any effect - hence back to the onBlur.
I could really use some advice on how to make this better. OnBlur helped, but I can just hear the complaints I'm going to get because of this non-consistent way of entering numbers.
Thanks for any help.
Corey.
The input is getting reset when breeze parses and updates the entity. To prevent this from happening, you can add breeze's z-float angular directive to the input.
Add the script to the page:
<script src="https://rawgithub.com/Breeze/breeze.js.labs/master/breeze.directives.js" ></script>
Add the module as a dependency to your app:
angular.module('yourApp', ['breeze.directives']);
And add the z-float directive to your input:
<input data-ng-model="vm.person.balance" z-float placeholder="Balance" />
See http://www.getbreezenow.com/breeze-labs/breezedirectivesfloat
The cause is Angular's eager data binding. Angular sends each keystroke through to the data bound model property.
That becomes a problem when Breeze parses data entry before the user has finished typing. The user could be in the middle of data entry when Breeze parsing does something to her intermediate value and updates the property with something else before she has a chance to complete her thought.
For more details, and to see it in action, check out their Plunker
Related
I'm new to react native.
I need to create the front-end part of an app used to manage products. In this app, a specific screen lets users add a "new product".
I've almost finished the UI part, but I now need to show errors to the user when something is wrong with its input (a missing product ID, a description with less than 10 characters, etc.).
Here's my objective: when the user clics the "publish" button, I check all the inputs. If the input is ok -> nothing happens, if the input contains an error -> the field turns red.
To achieve this, I need to work with states. Here should be an example for the title:
style={[style.inputText, {color: this.state.titleColor}]}
And I can change the state.TitleColor if something is wrong with the title input.
The problem is that I don't want to create a specific state for each input (titleColor, IDColor, descriptionColor, etc.).
How can I do a common state for inputs that are correct, and an other state for inputs that are wrong? I thought of using an array (with inputCorrect:[] ;
InputWrong:[]), but I do not know exactly how to deal with it.
Can someone help me? Thanks.
I'd recommend using a form library to help you with state and validation. I personally like formik, but I've heard good things about react-final-form as well (both are compatible with React Native).
Libraries like this make it easier to manage validation and input state, because they manage the state for you and tell each of your fields whether they're valid or not (passing appropriate error messages if needed).
It's still up to you to build the UI that displays the errors, but having the logic taken care of is a huge help. The formik docs have some good examples showing you how you would achieve your goal of changing a field color to red if that field has errors.
There is a bit of a learning curve to understand how to use these libraries well, but it's well worth it in my opinion.
I am trying to use Angular-Formly together with angular ui-select using $http for results.
The options should refresh as the user types in. When I set the model from another text input, the ui-select updates correctly and show the corresponding results based on what was typed into the text box.
When I however type straight into the ui-select box, I am not getting values back and the templateOptions.options function does not fire and the $viewvalue is not updated.
I also don't seem to have access to the $select.search results which are updated but are not available in the expressionProperties.
Please see the following JSBin that reproduces the error :
http://jsbin.com/peducofaje/edit
I would appreciate help on this.
I have an early Christmas present for you. I've updated the ui-select example to have exactly what you want :-) A few notes on why yours didn't work:
expressionProperties only run when the formState or model changes which is an optimization to reduce the number of watchers (because all expressionProperties share a single watcher). The problem with this is, your model didn't get updated until after an option was selected, so yeah.
The template was using a group-By, but the templateOptions didn't have a groupBy. You could use a templateManipulator to dynamically add a group-by if one is present on the templateOptions, but my solution doesn't demonstrate this.
You weren't handling the case where the address search was empty
Also, checkout the note at the top:
// NOTE: This next line is highly recommended. Otherwise Chrome's autocomplete will appear over your options!
formlyConfig.extras.removeChromeAutoComplete = true;
I hope this is helpful!
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'm looking for a solution where I could have an input box that has a value in, and that value cannot be changed, although if a user goes to enter information into that box, they can add say their name along side the value, but the value cannot be deleted.
Here's an example:
First Name:
If a user clicks on that box they can then enter their first name.
First Name: Kate
'First Name' cannot be deleted though and if possible not as a value.
I think this is possible but I can imagine it's a very tricky to do. I saw it on a website once but I can't remember where.
Even if there were possible, and I'm sure it is, you should not do it.
Whenever you manipulate a control so that is serves a purpose other than the purpose that it was designed to serve, it becomes a usability issue. Simply put, you are going to confuse your users.
Use a <label>, or rethink your interface design completely.
You probably can use a mask control or at least same principles. The advantage of this approach is that it covers your needs regarding using a text input and it won't confuse users usability thanks to the _ on the controls which will let users know clearly what can be removed and what cannot.
Here is an example with jQuery-Mask-Plugin
Online Demo
Your html
<input id="txt1" type="text" value="" tabindex="1" />
Your script
jQuery(function($) {
$('#txt1').mask('Something:a*****');
$('#txt1').val('Something:');
});
Disclaimer: Even though I used jQuery Mask plugin I am no saying it will be the right choice for your application or the only choice but I think it can guide or give you ideas on how your problem can be resolved.
Hope it helps!
http://jsfiddle.net/5QWqH/
Create a background image which contains the text "First name" and apply it to the text box. Add some padding-left to the box as well.
Note that you should also use a regular label tag for accessibility reasons, but you can hide that using CSS.
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.