I am using a value converter on an input with type text in aureliajs. While it is updating in normal way, it converts the value both in input and its bound value. But when adding & updateTrigger:'blur', the input text does update on user blurs but the bound value not getting data. For example:
<input type="text" value.bind="name | converter & updateTrigger:'blur'"/>
versus.
<input type="text" value.bind="name | converter"/>
in the second case, both text of input and variable name do update but in the first case, only text does.
Is this a bug in aurelia binding or my mistake?
the markup looks ok.
Are you implementing both toView and fromView functions in your converter? I tried your markup in a test setup and it works fine. You can check it out at
https://codesandbox.io/embed/value-converter-uhjp9
Best regards.
Related
I have a page with multiple textboxes and dropdowns with values that I am trying to validate. The values in them will be dynamic in each run.
The HTML looks something like:
<input readonly="readonly" class="form-control valid" data-val="true" data="ABC" aria-invalid="false" xpath="1">
What I want to do is grab the value of "data" for each textbox. I have used scriptAll before in such a case when I was grabbing text by using innerText. However, that won't work with a regular value such as in the HTML above.
I did try one solution that worked:
driver.value(//input[#data])
However, that just grabs the first textbox value, is there a way I can combine scriptAll with driver.value? OR would I be better off doing some JS here?
Thank you in advance!
Yes, refer the docs for scriptAll(): https://github.com/karatelabs/karate/tree/master/karate-core#scriptall
Use whatever JS works to get an attribute value. Haven't tried, but this should work, you get the idea:
* def list = scriptAll('input', "_.getAttribute('data')")
I want to have a controlled input, and set keep its value unchanged on any input. The problem is: it works only when I type in for the first time (i.e. it's set to 1). But then it stops working and you can type in any value. Why?
<input :value="message" #input="message = 1" />
Sandbox: https://codesandbox.io/s/unruffled-fire-in9yn?file=/index.html:162-209
If all you want to do is prevent the user from changing the <input> value, you can do that with simple HTML. You don't need Vue at all.
<input value="1" readonly>
I don't recommend doing this, but this would achieve your expected behavior:
<input v-model="message" #input="message = 1" />
This works because it is a "2-way binding" using v-model, which means changes to the input's value are propagated automatically, so a state change is triggered, because the new value of input is propagated (in the state) and then message = 1 get triggered afterwards and triggers a state change which updates the input element.
The original using :value=message is one-way, so changes in value to the input box are not automatically propagated to your component's state, and so Vue just sees a component with the same value bound to the message prop and does not update.
Consider sample below:
//edit.html
<input type="number" step="1" value.bind="number" />
<div repeat.for="num of number">${num}</div>
//edit.ts
export class Edit {
number: number = 2;
}
I expect to see 2 divs on first page load and number of divs should change when I change number in input. Instead I get error
Value for 'number' is non-repeatable
I figured it out. If you bind input field to variable, even when variable is number, it will be changed to string when changed by user. In my case, number became string once changed in input field. I used this gist to help me solve this problem:
https://gist.github.com/jdanyow/d9d8dd9df7be2dd2f59077bad3bfb399
It offers custom element and attribute for binding numbers to input fields.
I have an input element where I need to set one extra attribute and its value.
<input autocomplete="off" id="to_input" name="to" class="form-control arrival ui-autocomplete-input" placeholder="To" data-input-component="searchCondition" data-input-support="suggest" type="text">
I need to add the below attribute:
How can I do this in Geb?
To say a little more details, when I enter TPE in the input text box, some dropdown items appears and when I select one of them like
"Taipei, XXX.. (TPE)"
Than the new attributes are set automatically same as the picture above.
The only way to do it, is using JavaScript executor:
browser.driver.executeScript("your script")
And script using jquery will look like:
$('jquery-selector').attr('attribute-name', 'attribute-value');
Of course make sure to fill in your data in quotes!
I have the following code:
<input type="text" dojoType="dijit.form.NumberTextBox" size=8
constraints="{min:0,max:100000,places:0}"
id="orgNumberOfStudents" name="orgNumberOfStudents"
required="true" invalidMessage="Integer between 0 and 100,000"
value="">
Questions:
1) How do I set the width of the box? Do I have to do it in a style tag or a CSS? Is the traditional "input size" tag ignored?
2) The above sample shows the error when I type in a non-numeric value. But if I tab over the field and don't fill in anything, it's still blank. Is there a quick way to enforce the validation when I click the submit button? Do I need a Dijit submitt button? Do I need to write more JavaScript to make this happen? How does the required="true" actually occur?
(One get-around is to set the value to 0, but I'd rather force the user enter a value rather than just defaulting it).
Thanks,
Neal Walters
You should be able to use both CSS and traditional INPUT attributes like "maxLength" on your NumberTextBox by passing them in to the Widget's constructor. maxLength is available on all dijit.form.TextBox subclasses, but is probably less useful here since you have control over things like min/max and the actual number format.
Yes, you can always write your own JS to test "isValid()" on your widget instance before submission, e.g. in an HTML FORM onSubmit handler, or you could use dijit.form.Form which will check validity for you. The widget itself is only responsible for visual representation of its own validity, according to the options chosen.
HTH