The onBlur event in Html.Events does not allow for any values to be passed with it, as far as I understand. There is a way to make it include the value of the input (see this question for example: Elm Html.Events - Pass input value to onBlur message), but how can I also make it include another value?
My use case is that I generate a list (ul) from a list I have in my model, and this list can be any size, so I can not have a specific message for each input. Instead I would like something like this for each item:
input
[ value someValue
, onBlur UpdateItem uniqueId
]
[]
That way I could update the specific item in my model based on the id I got from the onBlur message.
How can I do this?
Update:
To clarify my question: I also need the value from the input, so I need to both pass my id and get the targetValue (as in the question I linked above).
(For future visitors: I use Elm 0.18)
My suggestion would be to use onChange, which you need to define yourself, and is triggered at the same time as the blur event.
onChange : (String -> msg) -> Attribute msg
onChange msgCreator =
Html.Events.on "change" (Json.map msgCreator Html.Events.targetValue)
then define a message to carry the new value and its id
type Msg
= UpdateItem Id String
and then make sure to use the defaultValue attribute (rather than value)
input
[ defaultValue someValue
, onChange (UpdateItem uniqueId) ]
[]
Related
I have list of options (radio button) and on selection of each option, it will display some input fields to take value from user. These values are stored in state "Dimensions". On option change, I am resetting the dimension object to undefined. But this is value is not getting updated in the input field and it is taking old values.
Text field:
<input value={dimensions ? dimensions[opt?.value?]: undefined}/>
On Option Change Method:
const handleOptionChange = (e: any) => {
setDimensions(undefined);
};
Can anybody please guide me through this.
Thanks inadvance!
In ReactJS, input value should always be defined, even if it is an empty string
<input value={dimensions ? dimensions[opt?.value?]: ''}/>
I have a simple TextBox in my Precision Design related to a Field in Temporary Table.
I need to show this TextBox only If the it value under Temporary Table is pupulated : so if the value field is pupulated (is a string) I show the Text Box , otherwise I don't show the text Box.
I need to set Visibility by Expression :
Which is the best way forward over ?
Thanks!
You can use iif function. Press fx button, here you can writte your code.
iif function evaluate a condition and return 1 of 2 options, for example, in your case you need show one value only if exist.
check this code:
=iif(fields!YourFieldName.value = "", true, false)
if your field is a number
=iif(fields!YourFieldName.value = 0, true, false)
This code evaluate the value of your field and only populate the value if is complete.
I would like to display the count of validation errors to my user.
It is to implement a message like "You have X error(s) left" next to the submit button.
Is there a way to do this ?
Edit :
I am using ember-validations 2.0.0-alpha.1 and ember 1.8.0 in the context of a controller (without ember data).
If I try the solution of Sam:
this.get('errors.length') // result is [], an empty array
The errors key holds an object, not an array. Each key of this object refers to a property on your model and points to an array of error messages, so you can do things like this.get('errors.firstName.length').
To find the total number of errors, you'd have to look through each of your model's properties and sum the number of errors for each one.
http://emberjs.jsbin.com/luzesiyeqi/1/
EDIT:
The .length property of the errors object is returning an empty array because of this code: https://github.com/dockyard/ember-validations/blob/master/addon/errors.js. Literally any key you access on the errors object will be initialized to an empty array.
EDIT 2:
Based on what you said in the comments about not wanting to loop through properties, you can do it in an alternative fashion by looking at the model's validators property. Check out this example:
numErrors: function () {
var errorCounts = this.get('model.validators').mapBy('errors.length');
return errorCounts.reduce(function (a, b) { return a + b }, 0);
}.property('model.validators.#each.length')
I've updated the JSBin, too:
http://emberjs.jsbin.com/jucuxodaga/1/edit?html,js,output
If you're using ember-validations, this will be easy: this.errors.length.
I'm trying to make a custom input type with simple_form that will implement combobox-type functionality using jQuery-Autocomplete
. What I need to do is output a hidden field that will hold the ID of the value selected and a text field for the user to type in.
Here's what I have so far:
class ComboboxInput < SimpleForm::Inputs::Base
def input
html = #builder.hidden_field(attribute_name, input_html_options)
id = '' #what?
value = '' #what?
return "#{html}<input class='combobox-entry' data-id-input='#{id}' value='#{value}'".html_safe
end
end
I need to get the ID of the hidden field that simple_form is generating to place as an HTML attribute on the text entry to allow the JavaScript to "hook up" the two fields. I also need to get the value from the model to prepopulate the text input. How do I do this from within my custom input?
I'm looking for the id as well, but I did get the value:
def input
current_value = object.send("#{attribute_name}")
end
I just found a hokey id workaround:
html = #builder.hidden_field(attribute_name, input_html_options)
id = html.scan(/id="([^"]*)"/).first.first.to_s
I know it's a hack, but it does work. Since we don't have access directly to this type of resolution, it is likely to keep working even if the underlying id creation code changes.
I have a filter attribute in my controller which I want to bind to the corresponding DOM element.
So far, I am able to display filter value, doing:
%input type="text" value=filter
But what I want is to reflect input changes back to filter, with a bidirectional binding...
Any clue?
= input valueBinding="filter"
is cleaner.
view Ember.TextField valueBinding="filter"
= input value=filter
or even with a sub property :
=input value=object.property
both works.