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.
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 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.
Is there any reason why a repeat.for binding would remove attributes from elements inside the repeater?
<div repeat.for="i of model.someArray.length">
<label>Some Array - Index ${i + 1}</label>
<input value.bind="model.someArray[i]" some-custom-attribute="someArray[${i}]"/>
</div>
and that some-custom-attribute is not being output within the repeat, but if I were to remove the string interpolation within there then it outputs fine.
== Edit ==
I have put it in a comment but just to make sure everyone is on the same page, ideally this is the output I expect:
<input value.bind="model.someArray[i]" some-custom-attribute="someArray[0]"/>
The some-custom-attribute is not an aurelia attribute, its pure HTML that a 3rd party JS library uses, so the goal here is to get the textual value of the index into the textual attribute value.
model.someArray.length is a number, not an array. You need to iterate over the array. If you do need the current index, the repeater provides the $index property for you to use.
Your code should look like this:
<div repeat.for="item of model.someArray">
<label>Some Array - Index ${$index + 1}</label>
<input value.bind="item" some-custom-attribute.bind="item"/>
</div>
To answer your original question, doing some-custom-attribute="model.someArray[${i}]" makes Aurelia think you are trying to pass a string value to the custom attribute. You can see that in the following gist: https://gist.run/?id=eed8ac8623ff4749aa5bb93c82a7b1fb I've created a custom element that just pushes whatever value it is given in to an element on the page. Note!!! Don't ever do what I'm doing here! I just did this this way so you wouldn't have to open the js console. To actually get a value passed in, you would need to use some-custom-attribute.bind="item" or (to do things how you are doing things, some-custom-attribute.bind="someArray[i]"
Currently I am building a hybride app for android devices. I am trying to use the ojInputNumber component to force a numeric keyboard show up on the device. Unfortunately, the component binding always gives type="text".
I have a list of objects which contains traits, while looping over traits, the following snippet will be loaded on screen based on the entrytype.
<div class="inputNumberWraper" data-bind="if: trait.getEntryType() === 'MANUALNUM'">
<input class="inputNumer"
data-bind="attr: {id: trait.getTraitCode()}
, ojComponent: {component: 'ojInputNumber'
, value: trait.getValue()
, min: trait.getMinValue()
, max: trait.getMaxValue()
, optionChange: changeListener
, required: trait.isMandatory() }"/>
<span data-bind="ojModule:{name: 'inputComponents/inputNumberFixer'}" />
</div>
I have tried to load a module (inputNumberFixer) after this the component is binded. To manually change the input type from text to number with jquery.
$(document).ready(function(){
$('.inputNumer').attr("type", "number");
$('.oj-inputnumber-button').hide();
});
this works until I select another object from the list and the input fields "refreshed". The type I have changed is put back to text but the inputnumberfixer did not run for the 2nd time.
Does anyone know how to force this component to bind the input type to number?
Unfortunately, no. There is not a way to force this today(v2.0.0 of JET). The ojInputNumber component is a generated component that provides the "spinner" option for easily increasing and decreasing the number value, but it does not set the number type so that the proper number keyboard shows up on a mobile device.
I've filed an ER for this to be fixed to show the proper keyboard. It should change in a future release.
HTML:
<input type="text" size="15" maxlength="79" value="" name="username">
As you can see, no ID. The HTML above is a textbox that i want to auto fill in whit my value as soon as i start the webpage whit my code.
this is what i found:
WebBrowser1.Document.Forms(0).GetElementsByTagName("username")(0).SetAttribute("value", (Text))
But whit this i get the error:
Value of '0' is not valid for 'index'. 'index' should be between 0 and -1.
Parameter name: index
What am i doing wrong?
This isn't going to find any elements:
WebBrowser1.Document.Forms(0).GetElementsByTagName("username")
"Tag name" doesn't mean the value of the name attribute, it means the name of the HTML tag itself. Like this:
WebBrowser1.Document.Forms(0).GetElementsByTagName("input")
Of course, this is likely to return multiple matched elements, so you'll need to further identify which one you want to modify. The point being that you should do some error checking to make sure that it finds anything, because trying to index an empty collection will result in an error:
WebBrowser1.Document.Forms(0).GetElementsByTagName("username")(0)
Since the collection has no elements, there is nothing at index 0.
May be u could try
Me.WebBrowser1.Document.GetElementByName("username").SetAttribute("Value", txtUsername.Text)