
const schema = yup.object().shape({
item: yup
.string()
.min(1, obj => showErrors('รายการ', obj.value.length, obj.min))
.required('กรุณากรอก '),
amount: yup.number().positive('ใส่จำนวนที่ไม่ติดลบ').typeError('ใส่จำนวน').required('ใส่จำนวน'),
stock: yup.array().of(
yup.object().shape({
id: yup.string() .min(1, obj => showErrors('id', obj.value.length, obj.min)).required('กรุณาเลือก'),
amount: yup.number().positive('ใส่จำนวนที่ไม่ติดลบ').typeError('ใส่จำนวน').required('ใส่จำนวน'),
}).required('กรุณาเลือก')
)
})
const onSubmit = async data => {
try {
const jsonData = JSON.stringify(data);
console.log('JSON Data:', jsonData);
} catch (error) {
}
}
โค้ดส่วน return
#item
<Controller
name='item'
#amount
<Controller
name='amount'
#stock id
<Tag key={i} {...(i !== 0 ? { in: 'true' } : {})} >
<Grid container spacing={5} sx={{mt: 1}}>
<Grid item xs={12} md={4} >
<Controller
name={`stock.${i}.id`}
control={control}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<CustomAutocomplete
fullWidth
value={value}
onChange={(event, value) => {
onChange(value?.id)
handleStockChange(value, i)
}}
disableClearable={true}
options={filteredStocks}
getOptionLabel={option => option.name || ''}
renderInput={params => (
<CustomTextField
{...params}
label='id'
error={Boolean(errors.stock?.
.id)}
{...(errors.stock?..id && {
helperText: errors.stock?..id.message
})}
/>
)}
/>
)}
/>
</Grid>
#stock amount
<Controller
name={`stock.${i}.amount`}
คือผมใช้ yup ในการแจ้งเตือนในกรณีที่ไม่ได้เลือกค่า id ในช่อง dropdown และช่อง amount โดยฉันเจอปัญหาที่ถ้ากดปุ่มบันทึกแล้ว มันไม่เกิดอะไรขึ้นเลยเหมือนไม่มันไม่เลือกใช้งานฟังก์ชัน onSubmit เลย โดยเมื่อฉันนำ yup ตรงส่วน stock ออกให้เลือกแค่ item กับ amount ก็สามารถกดปุ่มบันทึกได้ เกิดจากอะไรหรอครับ หรือบอกผมหน่อยครับว่าควรไปดูส่วนไหนเป็นพิเศษ (ปล.ผมไม่สามารถให้โค้ดเต็มได้ เพราะโค้ดบางส่วนเป็นความลับครับ)
สอบถามเรื่องการใช้ yup ใน React hook form
const schema = yup.object().shape({
item: yup
.string()
.min(1, obj => showErrors('รายการ', obj.value.length, obj.min))
.required('กรุณากรอก '),
amount: yup.number().positive('ใส่จำนวนที่ไม่ติดลบ').typeError('ใส่จำนวน').required('ใส่จำนวน'),
stock: yup.array().of(
yup.object().shape({
id: yup.string() .min(1, obj => showErrors('id', obj.value.length, obj.min)).required('กรุณาเลือก'),
amount: yup.number().positive('ใส่จำนวนที่ไม่ติดลบ').typeError('ใส่จำนวน').required('ใส่จำนวน'),
}).required('กรุณาเลือก')
)
})
const onSubmit = async data => {
try {
const jsonData = JSON.stringify(data);
console.log('JSON Data:', jsonData);
} catch (error) {
}
}
โค้ดส่วน return
#item
<Controller
name='item'
#amount
<Controller
name='amount'
#stock id
<Tag key={i} {...(i !== 0 ? { in: 'true' } : {})} >
<Grid container spacing={5} sx={{mt: 1}}>
<Grid item xs={12} md={4} >
<Controller
name={`stock.${i}.id`}
control={control}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<CustomAutocomplete
fullWidth
value={value}
onChange={(event, value) => {
onChange(value?.id)
handleStockChange(value, i)
}}
disableClearable={true}
options={filteredStocks}
getOptionLabel={option => option.name || ''}
renderInput={params => (
<CustomTextField
{...params}
label='id'
error={Boolean(errors.stock?..id)}
{...(errors.stock?..id && {
helperText: errors.stock?..id.message
})}
/>
)}
/>
)}
/>
</Grid>
#stock amount
<Controller
name={`stock.${i}.amount`}
คือผมใช้ yup ในการแจ้งเตือนในกรณีที่ไม่ได้เลือกค่า id ในช่อง dropdown และช่อง amount โดยฉันเจอปัญหาที่ถ้ากดปุ่มบันทึกแล้ว มันไม่เกิดอะไรขึ้นเลยเหมือนไม่มันไม่เลือกใช้งานฟังก์ชัน onSubmit เลย โดยเมื่อฉันนำ yup ตรงส่วน stock ออกให้เลือกแค่ item กับ amount ก็สามารถกดปุ่มบันทึกได้ เกิดจากอะไรหรอครับ หรือบอกผมหน่อยครับว่าควรไปดูส่วนไหนเป็นพิเศษ (ปล.ผมไม่สามารถให้โค้ดเต็มได้ เพราะโค้ดบางส่วนเป็นความลับครับ)