สอบถามเรื่องการใช้ 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 ก็สามารถกดปุ่มบันทึกได้ เกิดจากอะไรหรอครับ หรือบอกผมหน่อยครับว่าควรไปดูส่วนไหนเป็นพิเศษ (ปล.ผมไม่สามารถให้โค้ดเต็มได้ เพราะโค้ดบางส่วนเป็นความลับครับ)
แก้ไขข้อความเมื่อ
แสดงความคิดเห็น
โปรดศึกษาและยอมรับนโยบายข้อมูลส่วนบุคคลก่อนเริ่มใช้งาน อ่านเพิ่มเติมได้ที่นี่