I have two input text which, its :value is a value that is in a state in a store, I have two inputs, and in the store an array with two elements, where it assigns one to each input and shows it to me, but I want add a symbol either % or some text at the end of the input, how can I do it, can this be added in the :value?
<input
type="text"
class="text-center"
:value="filtersStore.absorptionValue[0]"
#input="event => filtersStore.handleAbsortionValue(event.target.value)"
>
in the input value I want to add the text or the symbol
You can use template literals with Vue's data bindings, e.g. to append a percent sign:
:value="`${filtersStore.absorptionValue[0]}%`"
Related
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 got empty value when i use :value and v-model together in the same element, I was trying to update some list in v-for,
here is the code
<input type="text" :value="product.productName" v-model="product">
how can i get my value it and get some update from that value when client change it because I need to use that value for the update list?
i have some list to show the value on input so i should keep showing the value because i dont want it to be empty , u guys know how to update so we need the value keep on the input
I have an email sending scenario in which there is an input box of 'To'(whom you want to send a message).
app.html
<input type="text" class="form-control" [(ngModel)]="email.Tos">
Now I want that when a user input the multiple emailId in input box by comma separated, then in my model, 'Tos' value should bind in an Array of string.
Like : ["abc#gmail,com" , "xyz#gmail.com"].
Now, please tell me how to split the input box value as per my requirement.
You need to use split() function.
Component
let toArray = this.email.Tos.split(",");
variable toArray will contain an array of emails.
Please check split
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.
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]"