I have a form which is showing multiple input based on database data and I need to get each input value when I submit my form.
Code
<form ref="form" :model="form">
<div class="row">
<div
class="col-md-6"
v-for="(field, index) in fields"
:key="index"
>
<input
class="form-control"
v-model="form.field"
:placeholder="field.title"
/>
</div>
</div>
<vs-button
class="mt-3"
#click="onSubmit"
native-type="submit"
gradient
>
Generate
</vs-button>
</form>
data() {
return {
fields: [],
form: {
field: [],
},
};
},
Issue
My issue is that currently when I fill 1 input others get the same value, I need to fill each input individually.
Screenshots
Any idea?
You're using your v-model pointing to form.field, try to use v-model="form.field[index]"
Related
I have a form where the user has the option to click an "Add" button and input content into new fields. I've currently dynamically generated the v-model for the fields, but I realized I need to register/return each of them in the setup function to use them.
How do I generate and register/return v-models for the different input fields if I don't know how many fields the user will decide to add?
<div
v-for="(content, i) in contentFields"
:key="i"
>
<div>Content {{ i }}</div>
<q-input
:v-model="`contentName_` + i"
outlined
type="text"
dense
/>
</div></div>
Take a look at following snippet with simple dynamic v-models pls:
new Vue({
el: "#demo",
data() {
return {
contentFields: [{name: '', desc: ''}]
}
},
methods: {
addInput() {
let newI = this.contentFields.length
this.contentFields.push({name: '', desc: ''})
},
setD() {
console.log(this.contentFields)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<button #click="addInput">add</button>
<div v-for="(content, i) in contentFields" :key="i">
<div>Content {{ i }}</div>
<input
v-model="content.name"
outlined
type="text"
dense
#change="setD"
/>
<input
v-model="content.desc"
outlined
type="text"
dense
#change="setD"
/>
</div>
</div>
I am wondering how can I dynamically validate a form input that loops through an array using angular 7. For example if I had a first name and last name field it would have a min characters and a required validator, in the same array I could have an age input that would have a min-max and required validators, I was thinking maybe I should put them into a switch case and send the type to a validate function but I'm not too sure how I could do that
This is the code I have to loop through the array I store the type and name of the input
/*Function to get the form*/
getForm() {
this.api.getForm(this.Param).subscribe(
data => {
this.form = data;
console.log(this.form);
}
);
}
<div class="contents">
<form name="form" (ngSubmit)="onSubmit()" #f="ngForm" novalidate>
<div class="row">
<div *ngFor="let questions of form?.results[0].fields">
<div class="md-form">
<div class="col-12 p-3 ml-2">
<span class="">{{questions.name}}</span><br />
<input mdbInput type="{{questions.type}}" />
</div>
</div>
</div>
</div>
</form>
</div>
I was also looking at reactive forms but I don't think it would work for what I need. Thank you in advance
I have a vue.js form with multiple form steps that needs html5 validation simplified it looks like this:
<template>
<div>
<div v-if="activeForm === 1">
<h2>
How much does {{ form.name }} weight?
</h2>
<text-input
v-model="form.weight"
name="weight"
:errors="form.errors"
type="number"
placeholder="For example: 20 kg"
required>
</text-input>
</div>
<div v-if="activeForm === 2">
<h2>
Search here
</h2>
<select-search></select-search>
</div>
<button v-if="activeForm > 1"
#click="previousForm()">
Previous
</button>
<button #click="nextForm">
Finish
</button>
<div>
</template>
<script>
export default {
data() {
return {
activeForm: 1,
totalForm: 6
}
},
methods: {
previousForm() {
if (this.activeForm > 1) {
this.activeForm--;
}
},
nextForm() {
if (this.activeForm < 6) {
this.activeForm++;
}
}
}
}
</script>
Right now obviously the HTML5 validation is not working. But how could I validate it for every form step any ideas (I want to submit the form with 1 ajax call)?
To use HTML validation you need to set the type of your input tags but that will not be enough because right now the specification only covers some inputs types like: date, email, number, (for number you can set a range with Min and Max). We would need to check your text-input component to see why is not working the HTML validation.
If you only need to verify that each input was filled by the user you can add the required attribute to those elements.
w2ui is ignoring the value on the input tag.
How do I get it to use the value?
It reads the selects just fine.
jsfiddle.net
<div id="form" style="width: 750px;">
<div class="w2ui-page page-0">
<div class="w2ui-field">
<label>First Name:</label>
<div>
<input name="first_name" type="text" value="John" />
</div>
</div>
</div>
<div class="w2ui-buttons">
<button class="w2ui-btn" name="reset">Reset</button>
<button class="w2ui-btn" name="save">Save</button>
</div>
</div>
$(function() {
$('#form').w2form({
name: 'form',
url: 'server/post',
fields: [
{ field: 'first_name', type: 'text', required: true }
],
actions: {
reset: function() {
this.clear();
},
save: function() {
this.save();
}
}
});
});
If I have to write JavaScript. How would I access the fields?
You can access the value of the input with form.record.
In your case w2ui.form.record.first_name (where form is the name of your w2form).
In your save event you can access the record with this.record, e.g.:
save: function() {
console.log(this.record);
console.log(this.record.first_name);
this.save();
}
additionally, As documentation of w2ui , you can set the value of input field
w2ui.Your_Form_Name.record['You_InputField_Name'] = The_New_value;
and then call form refresh to update both html and object, but this has issue where it clear the previous drop list select , so do set the new value with code as the following to avoid use refresh and keep pre-select in drop list
$('#InputFiled_Name').val(The_New_Value);
w2ui.Your_Form_name.record['Your_InputField_Name'] = The_New_Value;
so I am learning vue and have spent some time going through the documents and haven't seen the answer that solves my question. A lot of this is due to the nomenclature between using the CLI(which I am) and not.
I am trying to make it so that when one radio button is clicked it shows a div and when the other one is clicked it shows the other. Here is what I have.
Template:
<div id="daySelection">
<div class="o-m-day">
<div id="oneDay">
<p>One day?</p><input v-model="selected" type="radio" name="oneDay" id="" class="r-button" value="true">
</div>
<div id="multipleDays">
<p>Multiple days?</p> <input v-model="selected" type="radio" name="multDays" id="" class="r-button" value="false">
</div>
</div>
<!-- the div where the conditional render will be rendered -->
<div>
<!-- multiple days -->
<div v-show="selected" id="ta-multDays">
<textarea rows="10" cols="80" name="multDays" type="text" />
</div>
<!-- one day -->
<div v-show="!selected" id="i-oneDay">
<input type="text" name="r-oneDay">
</div>
</div>
</div>
Here is the script:
export default {
name: 'CreateTournamentForm',
data: function(e) {
return {
selected: Boolean,
}
},
}
above I was getting an error in the console that was saying that data needs to be a function that returns a new instance. I see many people and examples using vue instances differently where it is:
const app = new Vue({
el: '#app',
data: {
selected: true,
}
});
However whenever trying this Vue sends me a warning saying that it needs to be a function.
[Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.
I am also aware that v-show toggles the display so I have tried both setting the display of the divs to:
display: none;
as well as not.
The problem is that the value of selected is a string, whereas you expect it to be a boolean.
The following watcher:
watch: {
selected(newValue) {
console.log("selected changed to", newValue, "which is a", typeof newValue);
}
}
Will tell you this:
selected changed to true which is a string
selected changed to false which is a string
The reason is that you give the fields value a string instead of a boolean. To fix this, instead of writing value="true", write :value="true".
You can play with a live example here.
There are two problems as far as I can see here:
In a component, the data key must be a function and the value for the selected key in the object returned by the data function must be an actual boolean value true or false (which will be initial value)
export default {
name: 'CreateTournamentForm',
data: function(e) {
return {
selected: true,
}
},
}
By default, v-model values are treated as strings so your true and false values are actually the strings "true" and "false" which are both truthy. Changing your template code to the below (or alternatively using a number or string value instead) should fix it
<div v-show="selected === 'true'" id="ta-multDays">
<textarea rows="10" cols="80" name="multDays" type="text" />
</div>
I solved it by changing it from a 'v-show' to 'v-if'
<div>
<p>One day?</p>
<input
v-model="selected"
type="radio"
name="oneDay"
id="oneDay"
class="r-button"
value="onlyOneDay" />
</div>
<div id="multipleDays">
<p>Multiple days?</p>
<input
v-model="selected"
type="radio"
name="multDays"
id="multDays"
class="r-button"
value="multipleDays" />
</div>
then the div to be shown as follows:
<div v-if="selected === 'multipleDays'" id="ta-multDays">
<textarea rows="10" cols="80" name="" type="text" />
</div>
<div v-if="selected === 'onlyOneDay'" id="i-oneDay">
<input type="text" name="">
</div>