I have downloaded this design kit for Vue.js.
The thing is that when I'm writing text in it, it views the text I wrote, but after I focus out from the field, the text is hidden and the placeholder is shown back, but I couldn't understand why it does that.
When I'm printing the value of the field after writing in it, I get the value that I wrote, but I simply cannot see it inside the field.
Here is the code I'm using:
<base-input class="input-group-alternative mb-3"
:placeholder="email"
addon-right-icon="ni ni-email-83"
v-model="emailVal"
required="true"
:dir="dir">
</base-input>
I'm passing the email parameter as "Email Address" and the dir parameter as "ltr".
Could you please help me understand why it doesn't keeps my input inside the field?
Apparently the problem was that I didn't declared emailVal in my data object.
I added it like this, and it worked:
export default {
data() {
return {
email: 'Email Address',
dir: 'ltr',
emailVal: ''
}
}
}
Related
I'm using antd Form and have some Inputs in it. I wish to know if antd has something that can validate the users input and determine if what he typed are letters or numbers. I want the input to only allow the user to type (show) in the input only alphabets but not numbers.
Form.Item has a property called rules where you can establish a pattern using RegExp, but this is not what I want, because the user can still type numbers and they will be shown on the UI. Pattern property only pops a message like "field does not accept numbers" and I assume that when I submit the data it will take what the user typed regardless of the failed rule/pattern.
I have been able to do what I'm asking by having to create a state with an object with all my values, removing the name property from the Form.Item and adding it to the Input, along with an onChange and value property but this requires more "wiring'. If you have worked with antd Form, there is an onFinish property that collects all the data so you don't have to create a separate state.When removing the name property from Form.Item, antd won't be able to collect the data of the form anymore thus rendering it useless. I wish to know if antd has something that can help me achieve what I typed in the beginning.
Following code does what I want, but uses state.
My Form.Item
<Form.Item
// name="nombre"
label="Nombre(s)"
rules={[
{ required: false, message: "REQUIRED_ERROR_MESSAGE" },
{
pattern: new RegExp(/^[a-záéíóúüñçA-Z]*$/i),
message: "field does not accept numbers",
},
]}
>
<Input
onChange={handleWordInput}
value={altaFormValues.nombre}
name="nombre"
/>
</Form.Item>
My Input handler function:
const handleWordInput = (e) => {
console.log("e", e.target.value);
const re = /^[a-záéíóúüñçA-Z\s]*$/;
const { name, value } = e.target;
if (value === "" || re.test(value)) {
setAltaFormValues((prevState) => {
return { ...prevState, [name]: value };
});
}
};
When I have a textarea like
<textarea v-model="foo.abc.text"></textarea>
and either foo or foo.abc does not exist yet then
vue removes either parts of the DOM or is giving me a blank page.
It does never recover.
That alone is annoying, regardless of if I am using a debug version of vue or not.
If I try to use an approach that I have been advised to use earlier like
<textarea v-model="foo?.abc?.text"></textarea>
then I am still out of luck, I presume that I get a "rvalue" using those question marks and what I need rather is a variable location.
How do I, with as little trickery as possible, allow v-model to exist later on even if it doesnt exist now (late binding)?
Just shape your data accordingly and initialize it with empty values:
data(){
return {
foo: {
abc: {
text: ''
}
}
}
}
You can later populate it e.g. with the result of api call, but it's still better to initialize data properly
I would suggest going the :value + #input way. It allow more control over the input model, and does not require hiding it.
<textarea :value="!!foo && foo.abc.text" #input="(val) => !!foo && (foo.abc.text = val)" />
You can even hook in a validator:
<textarea
:value="!!foo && foo.abc.text"
#input="(val) => !!foo && (foo.abc.text = val)"
:rules="v => !v && 'The object has not been initialised'"
/>
I found a solution I can live with and then I got a comment in the same direction:
Conditionally showing the textarea.
v-if seems to do it but it falls under the "trickery" category, I think (angularjs would be more relaxed).
<textarea v-if="foo!=null" v-model="foo.abc"></textarea>
The symptom to hiding components if something is not all correct is not the best part of vue.js. Better show them and color them red.
Based on this threat I've managed (with special thanks to Tami) to create a dropdown menu with variable year numbers in it.
Now I would like to use that chosen value of that dropdown menu as a (part of the) placeholder for another input field.
I tried this with no luck:
[number* ba-maanden min:1 max:12 placeholder "cf7_get_input="recent-years""]
Does anyone has an idea how to get this done?
Thanks,
Vasco
This is not tested, but should work. You can either add this to your form itself by making it all inline and surrounded with <script> and </script> or add this to your theme's js file.
jQuery(function($) {
$('select[name="ba-maanden"]').on('change', function(){
// Assign variable $placeholder to the chosen value
let $placeholder = $(this).val();
// replace 'your-field-name' with the cf7 field name
$('input[name="your-field-name"]').attr('placeholder', $placeholder);
});
});
I am implementing the component like this:
<place-autocomplete-field
v-model="field"
name="field"
label="Address lookup"
:api-key="api_key.api_key"
placeholder="Start typing here"
#autocomplete-select="onPlaceInput"
>
</place-autocomplete-field>
...
data() {
return {
api_key,
field: null
};
...
While the #autocomplete-select event fires fine, and delivers the selected value, the value displayed in the component's input field does not update on selecting from the place options. All that is in the input field is whatever was typed in there. This is not how it works in the demo on Github. Can anyone spot what I may be doing wrong?
I'm creating dijit widget from input:
<input name="serviceName" type="text"/>
input = new ValidationTextBox({required: true}, query('[name=serviceName]')[0])
I have a lot of inputs and I want to batch-process them, giving them to separate function.
The problem is, that I can't find in docs, how to get the input name back from widget (which can be also Select, DateBox etc., neither I can find that property inspecting element in Firebug
function processInput(input) {
var inputName = ???
}
I've tried input.name and input.get('name'), but they are returning undefined.
When instantiating your widget programmatically, properties are usually not copied. It's only when you use declarative markup that these properties are copied. This means that the name property is not copied from your original input node, so it's in fact empty.
When creating your ValidationTextBox, just provide the name property like the example below:
var inputNode = query('[name=serviceName]')[0];
var input = new ValidationTextBox({
required: true,
name: inputNode.name
}, inputNode);
You can then retrieve the name with either input.name or input.get('name').
I also made an example JSFiddle.