I'm trying to use Yup to validate data in an array. For example, this is my initialValue:
{name:'',extra:[]}
After dynamic render the form field , the initialValue will become like this:
{name:'',extra:[{label:'age',value:'',required:true}]}
I want to set the validation scheme to validate the 'value' in the object only when 'required' is true.
I use this data to mock the situation:
{name:'john',extra:[{label:'age',value:'',required:true}]};
Method that i had try:
const validationschema = yup.object().shape({
name: yup.string().required(),
extra: yup.lazy((value,index)=>{
return yup.mixed().required();
})
})
There should be an error when the user submit , because the 'value' for age is empty.
I not sure why, i can't really validate the 'value'. How do I change my validationschema so it can validate the 'value' ?
Try to validate like:
name: yup.string().required(),
extra: yup.array()
.of(
yup.object().shape({
required: yup.bool(),
value: yup.object().when('required', {
is: true,
then: yup.string().required('Please, select position')
}),
})
)
There you should check field required. If it true you validate it.
Related
I have two fields "fromAccount" and "toAccount", both are objects. suppose both ojects have value:
formAccount={title:'abc',type:'xyz', ...}
toAccount={accountName:'abc',type:'xyz', ...}
Actually I want if, fromAccount.title become equals to toAccount.accountName generate error on onSubmit (formik).
below is validationSchema that I have tried but it doesn't invoke error.
const validationschema = Yup.object().shape({
fromAccount: Yup.object().shape({
title:Yup.string()
}).required().nullable().label('* From Account'),
toAccount: Yup.object().shape({
accountName:Yup.string().notOneOf([Yup.ref('title')], 'Select another account')
}).required().nullable().label('* To Account'),
amount: Yup.number().min(1).required().label("* Amount"),
});
How do i push my results into a data object please
I would like to push the :key to the id field and the :data to map across to my other data fields
my data object is called orgs: []
I have the following data returned from my get query
[{…}]
0:
data: {person: 'John', orgName: 'test', due: 'this is due'}
key: "11ed25ccf7548160bff2ab4c1d56ee40"
I have tried
this.$db.collection('orgs').get({ keys: true })
.then
(response => {
console.log('orgs: ', response) <--- this displays the results
this.orgs.forEach(response => {
const data = {
'person': response.data.person,
'orgName': response.data.orgName,
'due': response.data.due,
'id': response.key
}
this.orgs.push(data)
})
});
I get no errors but my this.orgs data item remains empty so assume I am not updating the array for some reason
Thanks
I seem to be able to populate it in a simple way as follows
this.$db.collection('orgs').get({ keys: true })
.then
(response => {
this.orgs = response
console.log('response:', this.orgs)
})
Is there any issue with this approach for just getting my results or should I be using push?
Here is the user details which I want to update values when user enters data in Textinput
const [details, setDetails] = React.useState({
isValidName: true,
isValidMobile: true,
isValidEmail: true,
isValidGSTIN: true,
isValidPAN: true,
name: '',
mobile: '',
email: '',
company: '',
baddr1: '',
baddr12: '',
bcity: '',
bpincode: '',
bstate: ' TAMIL NADU',
bcountry: 'INDIA',
saddr1: '',
saddr2: '',
sbranch: '',
sgstin: '',
scity: '',
spincode: '',
sstate: '',
scountry: '',
pan: '',
gstin: '',
userlevel: '',
});
//In this method i am updating values each time when user enters data
const submitBillAddress = (data, type) => {
console.log('bill', type);
switch(type){
case 'addr1':
setDetails((prevState)=>{
return({
...prevState,
baddr1: data
});
});
break;
}
console.log('billdetails', details);
};
return (
<View>
<TextInput
style={styles.TextInputStyleClass}
placeholder="Address Line 1"
value={sameAddress?null:details.baddr1}
onChangeText={val => submitBillAddress(val, 'addr1')}
/>
</View>
)
I am new to React Native application development and I know this question is basic but I am not getting exact output. Here I have one Textinput in which I am entering data that I wanted to store in details.
The issue is if I enter data in textinput it's not updating value in details. Let's say I am entering 'C' in Textinput if I try to check the value in console the value of details.baddr1='' it's empty, Second time if I enter value 'H' on that time in console the value of details.baddr1='C'. Instead of showing the value details.baddr1='CH' it's showing previously entered value.
How can I fix this issue?
I'm guessing this is for a form of some sort. In that case, a package is your best bet I believe. While what you're trying to achieve is possible without a package, using a package is far less painful in the long run for your app.
Please check out formik or react-hook-form.
They're both decent.
I try to filter my list with 2 select lists based on the selected value. It seems like my computed filter is not working?
You should be able to filter the list on 'Price from' and 'Price to'
List.vue
My computed filter property:
filteredData() {
const LowerCaseSearch = this.search.toLowerCase();
return this.products.filter(
product =>
(product.name.toLowerCase().includes(LowerCaseSearch) ||
product.category.toLowerCase().includes(LowerCaseSearch)) &&
(!this.checked.length || this.checked.includes(product.category)) &&
(!this.selectedFrom.length || this.selectedFrom.includes(product.price)) &&
(!this.selectedTo.length || this.selectedTo.includes(product.price))
);
},
In my registered component I use v-model to bind to the computed property selectedFrom
<Price v-model="selectedFrom" />
How do I bind to the other property selectedTo in one v-model and what's wrong with my filter?
I also use a prefix 'From' and 'To' to put in front of the options.
data: () => {
return {
selectedFrom: '0,00',
priceFrom: [
{ prefix: 'From', text: '0,00', value: '0,00' },
{ prefix: 'From', text: '200,00', value: '200,00' },
{ prefix: 'From', text: '400,00', value: '400,00' }
],
selectedTo: 'No max',
priceTo: [
{ prefix: 'To', text: '400,00', value: '400,00' },
{ prefix: 'To', text: '600,00', value: '600,00' },
{ prefix: 'To', text: '800,00', value: '800,00' },
{ text: 'No max', value: 'No max' }
]
}
},
Is there a more elegant and D.R.Y way to do this?
Here is a sandbox what I have so far.
You should bind an object to your v-model on the <price> component.
This way you can pass multiple values to and from your component, without having to use multiple props.
I would also suggest you convert your value in your selects to numbers, so it's easier to use them to compare to your prices.
You've also defined data properties and computed properties in the sandbox (<price> component) with the same name, this is not possible. So you should remove the data properties and stick to the computed ones to handle your data.
Fork of your sandbox with my suggested changes.
So, I have an Express server running Sequelize ORM. Client will answer some questions with radio button options, and the answers is passed as query parameters to the URL, so I can make a GET request to server.
The thing is: my req.query values are supposed to be the column names for my database table. I want to know if it's possible to get the response from the database using Sequelize, and passing the parameters as the column name of the table.
async indexAbrigo(req, res) {
try {
let abrigos = null
let type = req.query.type // type = 'periodoTEMPORARIO'
let reason = req.query.reason // reason = 'motivoRUA'
abrigos = await Abrigos.findAll({
attributes: ['idABRIGOS'],
where: {
//I want type and reason to be the parameters that I got from client
type: 'S',
reason: 'S'
}
})
}
res.send(abrigos)
}
This is not working, the result of the query is something like
(SELECT `idABRIGOS` FROM Abrigos WHERE `type` = `S` AND `reason` = `S`)
Instead, I need that type and reason get translated to their values, and these values will be passed to the SQL. Is it possible to do with Sequelize? Or is it even possible with any ORM for Node/Express?
Thanks.
Yes, you can do it with computed property names. It would look like this:
where: {
[type]: 'S',
[reason]: 'S'
}
Your node.js version must be compatible with ES6.
Thank you - I am passing parameters right from req.body and this worked perfectly for me so I am posting it in the event that it may save someone time.
app.post('/doFind', (req, res) => {
Abrigos.findAll(
{[req.body.field]: req.body.newVal},
{returning: true, where: {id: req.body.id}}
)
.then( () => {
res.status(200).end()
})
.catch(err => {
console.log("Err: " + err)
res.status(404).send('Error attempting to update database').end()
})
})