Develop Reference

How to have a searchbar in "Select" Component native-base

I would love to have a search bar in "Select" component from the library native-base in react-native.
I have tried adding a "TextInput" component inside the "Select" component. In UI it aligns perfectly, but when I click on the "TextInput" it gets selected and the list drops down.
Following is the code I tried:
<Select
w={w}
h={h}
variant="outline"
selectedValue={selectedValue}
minWidth="200"
// borderColor={primaryColor}
accessibilityLabel={accessibilityLabel?accessibilityLabel: "Choose Service" }
placeholder={placeholder?placeholder: "Choose Service"}
_selectedItem={{
bg:"coolGray.200",
// endIcon: <CheckIcon size="5" />
}}
mt={1}
onValueChange={onValueChange}
>
<Input
placeholder="Search"
variant="filled"
width="100%"
h={heightPercentageToDP("6%")}
borderRadius="10"
py="1"
px="2"
borderWidth="0"
/>
{
data?.map(item => {
return(
<Select.Item
label={item.label}
value={item.value}
/>
)
})
}
</Select>

Select box of native base has prop _actionSheetBody, it contains IFlatListProps so you can use ListHeaderComponent in there. So can use this way.
You use a state to save search value:
const [searchValue, setSearchValue] = React.useState<string>('');
Edit select box
`
<Select w={w} h={h} variant="outline" selectedValue={selectedValue}
minWidth="200"
accessibilityLabel={accessibilityLabel?accessibilityLabel: "Choose Service" }
placeholder={placeholder?placeholder: "Choose Service"}
_selectedItem={{
bg:"coolGray.200",
// endIcon: <CheckIcon size="5" />
}}
mt={1}
onValueChange={onValueChange}
_actionSheetBody={{
ListHeaderComponent: <FormControl px={3} mb={3}>
<Input
px={15}
py={2}
fontSize={16}
value={searchValue}
placeholder=""
_focus={{ bg: colors.white['50'], borderColor: 'darkBlue.600' }}
type='text'
onChangeText={(value: string) => {
setSearchValue(value);
}}
/>
</FormControl>
}}
>
<Input
placeholder="Search"
variant="filled"
width="100%"
h={heightPercentageToDP("6%")}
borderRadius="10"
py="1"
px="2"
borderWidth="0"
/>
{
(data && data.length)?data.filter((item)=>{
// you filter with searchValue
return true;
}).map(item => {
return(
<Select.Item
label={item.label}
value={item.value}
/>
)
})
}
</Select>

How to pass value to v-model with emit?

I'm trying to pass value from a select field to v-model but the code only works in a v-text-field.
<script>
export default {
name: 'FormSelect',
props: {
modelValue: {
type: [String, Number],
default: '',
},
label: {
type: String,
default: '',
},
items: {
type: Array,
},
},
model: {
prop: 'modelValue',
event: 'change',
},
};
</script>
<template>
<div>
<v-select
:label="label"
v-bind:value="modelValue"
#input.native="$emit('change', $event.target.value)"
:items="items"
></v-select>
</div>
</template>
<template>
<div class="form">
<v-flex xs10 sm8 md6 lg5>
<v-card>
<FormTitle />
<ModalFormMessage />
<v-form ref="form" class="d-flex flex-column">
<FormSelect
v-model="vulnerabilities.vulnerability"
label="Vulnerability"
:items="items.vulnerability"
/>
<FormInputs
v-model="vulnerabilities.evidence"
label="Eevidence"
type="file"
/>
<FormInputs
v-model="vulnerabilities.solution"
label="Solution"
type="text"
/>
<FormBtns />
</v-form>
</v-card>
</v-flex>
</div>
</template>
In the select field is not returning the selected value, how can I make the value I select be passed to the v-model in the child component too?

You should emit an event with name input :
#input="$emit('input', $event.target.value)"

I solved it as follows
methods: {
changeSelect: function () {
this.$emit('input', this.modelValue);
},
},
<template>
<div>
<v-select
:label="label"
#input="changeSelect()"
v-model="modelValue"
:items="items"
></v-select>
<p>{{ modelValue }}</p>
</div>
</template>

Vue form submits twice or once and empty

I am new to javascript and Vue, I have made this simple form using CoreUI Vue and js and I submit the data on PostgreSQL.
In the code if I Use v-on:submit="postdata" it submits once and empty , if I use v-on:submit.prevent="postdata" it submits twice the first time empty and the second time right.
Please help I am stuck many days I can't find something wrong,
<template>
<div>
<CCard>
<CCardHeader>
<slot name="header"> <CIcon name="cibCcVisa" /> {{ caption }} </slot>
</CCardHeader>
<CForm id="myforma" v-on:submit="postdata">
<CCardBody>
<CRow>
<CCol>
<CInput name="title" label="title" placeholder="Enter Title" v-model="posts.title" id="title" />
</CCol>
</CRow>
<CRow>
<CCol>
<CInput label="year" type="date" v-model="posts.year" name="year" />
</CCol>
</CRow>
<CRow>
<CCol>
<CInput name="writer" label="writer" placeholder="Enter the writer" :v-model="posts.writer" />
</CCol>
</CRow>
<CRow>
<CCol sm="12">
<CInput name="description" label="description" placeholder="Write the description" v-model="posts.description" />
</CCol>
</CRow>
<CRow>
<CCol lg="6">
<CSelect label="type" name="type" :options="['1.Books', '2.Comics', '3.NOvels', '4.Writings']" :value.sync="posts.type" />
</CCol>
</CRow>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-check-circle" /> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton>
</CCardFooter>
</CForm>
</CCard>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'forma',
data(){
return{
posts: {
title: '',
year :'' ,
writer:null,
description:null,
type: '1.Books'
},
}
},
props: {
caption: {
default: 'Thanasis Form'
}
},
methods: {
postdata() {
axios.post('http://localhost/post.php',this.posts).then((response) => {this.posts= response.data;
console.log(response.data)});
console.log(this.posts);
}
}
}
</script>
<style></style>
<?php
include "db.php";
$received_data = json_decode(file_get_contents("php://input"),true);
$table= $received_data['title'];
$wri=$received_data['writer'];
$result=pg_query($connection,"INSERT INTO tablet (title) VALUES (' $table')");
?>

how to make react-hook-form work with multiple forms in one page?

I am using react-hook-form in my project and I have 2 totally separate forms, but when I submit one of the forms and if some fields in the other form is required I can't submit the current form, check the demo, and try to submit one of the form, the forms should work independently of each other but it looks like they depend on each other.
any help please?

Welcome to StackOverflow #webcoder
You are using the same hook instance for both forms. You will have to reuse with different names.
import React from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";
import "./styles.css";
function App() {
const {
register,
formState: { errors },
handleSubmit,
} = useForm({
mode: "onBlur",
});
const {
register: register2,
formState: { errors: errors2 },
handleSubmit: handleSubmit2,
} = useForm({
mode: "onBlur",
});
const onSubmit = (data) => {
alert(JSON.stringify(data));
};
const onSubmitEmail = (data) => {
alert(JSON.stringify(data));
};
return (
<div className="App">
<form key={1} onSubmit={handleSubmit(onSubmit)}>
<div>
<label htmlFor="firstName">First Name</label>
<input
name="firstName"
placeholder="bill"
ref={register({ required: true })}
/>
{errors.firstName && <p>This is required</p>}
</div>
<div>
<label htmlFor="lastName">Last Name</label>
<input
name="lastName"
placeholder="luo"
ref={register({ required: true })}
/>
{errors.lastName && <p>This is required</p>}
</div>
<input type="submit" />
</form>
<form key={2} onSubmit={handleSubmit2(onSubmitEmail)}>
<div>
<label htmlFor="email" placeholder="bluebill1049#hotmail.com">
Email
</label>
<input name="email" ref={register2({ required: true })} />
{errors2.email && <p>This is required</p>}
</div>
<input type="submit" />
</form>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Quick update to Faizaan's answer: in my case, errors should be used with formState, not by itself. Therefore, the property should be imported as:
const { formState: { errors } } = useForm();
const { formState: { errors: errors2 } } = useForm();
The names might be confusing, but these is the solution that I arrived at.

If someone is using useForm with other libraries like Material UI and have two forms then can be used:
const { control, handleSubmit } = useForm({
resolver: yupResolver(schema), })
const { control: control2, handleSubmit: handleSubmitReset } = useForm({
resolver: yupResolver(schema2),
});
const onSubmit = async (data) => {
console.log(data);
};
const onSubmitResend = async (data) => {
console.log(data);
};
And the forms will look like:
FORM-1
<form key={1} onSubmit={handleSubmitReset(onSubmitResend)}>
<FormLabel
component="legend"
color="secondary"
sx={{ color: "#fff", pt: 2 }}
>
Email:
</FormLabel>
<Controller
defaultValue=""
name="email"
control={control2}
render={({
field: { onChange, value },
fieldState: { error },
}) => (
<TextField
helperText={error ? error.message : null}
error={!!error}
value={value}
onChange={onChange}
id="outlined-basic"
placeholder="Enter Email address"
variant="outlined"
fullWidth
color="secondary"
InputProps={{
style: {
color: "#fff",
border: "1px solid #fff",
borderRadius: "32px",
marginTop: "16px",
},
}}
/>
)}
/>
>
<Button
fullWidth
color="secondary"
type="submit">
Submit
</Button>
</form>
FORM-2
<form key={2} onSubmit={handleSubmit(onSubmit)}>
<FormLabel
component="legend"
color="secondary"
sx={{ color: "#fff", pt: 2 }}
>
Email:
</FormLabel>
<Controller
defaultValue=""
name="email"
control={control}
render={({
field: { onChange, value },
fieldState: { error },
}) => (
<TextField
helperText={error ? error.message : null}
error={!!error}
value={value}
onChange={onChange}
id="outlined-basic"
placeholder="Enter Email address"
variant="outlined"
fullWidth
color="secondary"
InputProps={{
style: {
color: "#fff",
border: "1px solid #fff",
borderRadius: "32px",
marginTop: "16px",
},
}}
/>
)}
/>
>
<Button
fullWidth
color="secondary"
type="submit">
Submit
</Button>
</form>

How to implement a simple form with validation in a Vue app (with Vuetify.js)?

I'm trying to add a contact form with simple validation on a website built with Vue.js using a Vuetify.js example. I'm a newbie, so I'm not sure how it should be implemented in a Vue component.
I want to achieve a simple client side form validation and make it work with a https://getform.org/ form.
UPDATED:
Code | Contact.vue
(taken from Vuetify.js form example)
<v-form v-model="valid">
<v-text-field
label="Name"
v-model="name"
:rules="nameRules"
:counter="10"
required
name="Name"
></v-text-field>
<v-text-field
label="E-mail"
v-model="email"
:rules="emailRules"
required
name="Email"
></v-text-field>
<v-btn
#click="submit"
:disabled="!valid"
>submit</v-btn>
</v-form>
<form method="post" action="https://www.getform.org/f/[MY_ID_HERE]" id="nativeForm"></form>
Script
<script>
export default {
name: 'contact',
data () {
return {
snackbar: true,
valid: false,
name: '',
nameRules: [
(v) => !!v || 'Name is required',
(v) => v.length <= 10 || 'Name must be less than 10 characters'
],
email: '',
emailRules: [
(v) => !!v || 'E-mail is required',
(v) => /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
]
}
},
methods: {
submit() {
nativeForm.submit()
}
}
}
</script>

Managed to make it work by using just 1 form:
<v-form method="post" action="https://www.getform.org/f/[YOUR-FORM-ID]" id="nativeForm" v-model="valid">
<v-text-field
label="Name"
v-model="name"
:rules="nameRules"
:counter="10"
required
name="message"
></v-text-field>
<v-text-field
label="E-mail"
v-model="email"
:rules="emailRules"
required
name="mail"
></v-text-field>
<v-btn #click="submit" :disabled="!valid">submit</v-btn>
</v-form>
script
<script>
export default {
name: 'contact',
data () {
return {
valid: false,
name: '',
nameRules: [
(v) => !!v || 'Name is required',
(v) => v.length <= 10 || 'Name must be less than 10 characters'
],
email: '',
emailRules: [
(v) => !!v || 'E-mail is required',
(v) => /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
]
}
},
methods: {
submit() {
nativeForm.submit()
}
}
}
</script>
Don't forget:
To add name attributes. Getform needs them.

const app = new Vue({
el:'#app',
data:{
errors:[],
name:null,
age:null,
movie:null
},
methods:{
checkForm:function(e) {
if(this.name && this.age) return true;
this.errors = [];
if(!this.name) this.errors.push("Name required.");
if(!this.age) this.errors.push("Age required.");
e.preventDefault();
}
}
})
input,select {
margin-left: 10px;
}
<script src="https://unpkg.com/vue#2.5.13/dist/vue.js"></script>
<form id="app" #submit="checkForm" action="/something" method="post">
<p v-if="errors.length">
<b>Please correct the following error(s):</b>
<ul>
<li v-for="error in errors">{{ error }}</li>
</ul>
</p>
<p>
<label for="name">Name<label>
<input type="text" name="name" id="name" v-model="name">
</p>
<p>
<label for="age">Age<label>
<input type="number" name="age" id="age" v-model="age" min="0">
</p>
<p>
<label for="movie">Favorite Movie<label>
<select name="movie" id="movie" v-model="movie">
<option>Star Wars</option>
<option>Vanilla Sky</option>
<option>Atomic Blonde</option>
</select>
</p>
<p>
<input type="submit" value="Submit">
</p>
</form>
Add some CSS and done.