So I have this input field with select options, so that the user doesn't have to specify what type of input he has, but the thing is, I want the addonBefore value as a prefix to the input. I thought that's what it will do, but it just passes my input without any prefix.
Here's the code I wrote
<a-input defaultValue="Device/Order ID" v-model="code" v-on:keyup.enter="new_scan">
<a-select slot="addonBefore" defaultValue="device-" style="width: 90px">
<a-select-option value="device-" prefix="device-">Device</a-select-option>
<a-select-option value="order-" prefix="order-">Order</a-select-option>
</a-select>
</a-input>
And even with the prefix it's not working. Is there any way I can make it so that if Device is selected and the user input is 12345, the end input is device-12345?
Thanks in advance!
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 developing an application using angular dart. I am using angular dart material input for getting input from user.
I have a multiline text input for which I use material input and type="text".
I have made this field "required" but the problem is when the user enters white space or enter, the "required" is gone. I need a attribute where i can specify a constraint that at least one non-white space character must be entered.
How to achieve this?
Here is my code where I have used material input:
<material-input
ngControl="textAnswer" [(ngModel)]="answer" multiline
type="text" label="Your answer" required>
</material-input>
As per documentation you can use all input elements attribute with it.
All of the attributes that can be used with normal <input> and <textarea> elements can be used on elements inside <mat-form-field> as well
So use HTML5 pattern attribute to match the custom pattern(regular expression).
<material-input
ngControl="textAnswer" [(ngModel)]="answer" multiline
pattern="[\s\S]*\S[\s\S]*"
type="text" label="Your answer" required>
</material-input>
[\s\S]*\S[\s\S]* will help to match a string with at least one non-space character.
NOTE : To include all other character use [\S\s] since . doesn't include a newline character.
I'm currently using Vuetify to create a datatable, I see with the search as you type it filters down to narrow the results based on what's type in. I'm curious how I can use the same search bar, so when I hit enter it'll actually take the value and rebuild the datatable using the same axios call but adding the params to the URL. I still want to be able to filter current results when typing and not hitting enter though. Is this possible?
Overall Im trying to create tags when searching. Users would have the ability to hit enter, rebuild the table, but see the value they entered as a tag. With also the ability to x out of it and delete to restore defaults.
Assuming you have a search input like this:
<v-text-field
v-model="search"
append-icon="search"
label="Search"
single-line
hide-details
v-on:keyup.enter="myFunction"
></v-text-field>
You can add the v-on:keyup.enter as above, then put your functionality in myFunction
In myFunction, you can say this.search to get the value of that, and you can do whatever you want with it.
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 some slightly funky UI for inputting tags for a blog post: as tags are entered into an input field they are wrapped into spans that make them look nice by surrounding them in a stylized box, the end result comes out to be something like this:
http://forr.st/posts/OLs/original
Now, this input field (call it field 1)is not part of the form that gets submitted to the controller (I'm using RoR btw) for two reasons: it contains extraneous html tags, besides the actual tags; also if it was part of the form pressing enter would submit the form instead of triggering the js that wraps the entered tag into a span.
So what I'm doing is when each tag is entered, I copy its value (via js) to a hidden input field that IS part of the tag entry form, and when submitted would contain only the tag values and nothing else. The question is: What should I use as delimiter to separate the tags in the hidden input field. Currently I'm using ';' but if a tag itself contains ; that'd cause problems.
I'm also open to suggestions about the general method of how to keep track of the tags entered into 'field 1'
Thanks a lot,
I would recommend just adding a hidden input for each tag.
<input type="hidden" name="post[tags][]" value="tag_name" />
<input type="hidden" name="post[tags][]" value="tag_name" />
<input type="hidden" name="post[tags][]" value="tag_name" />
then in rails
post.rb
def tags=(value)
tag_array = [*value]
# then just filter these out.
end
I use a similar method with the tokenInput jQuery plugin. But in my case I've placed it inside the form. I solved the problems that you mentioned by capturing the keypress event and preventing it for that input and I ignore the search input value.
The one thing that I really like about keeping it inside the form is how it is managed afterward. I place the hidden tag, name, and a remove 'x' in a span (like you mentioned) and then just remove this tag when the 'x' is clicked. I like this because the name and the hidden_tag are removed at the same time.
Just one other tip. If you can, pass the tag_id in the hidden field. This way you don't have to add the tags attribute add all: <input type="hidden" name="post[tag_ids][]" value="tag_name" />.