Document and Getting started

Thư viện và cách sử dụng tại đây → https://github.com/jquense/yup

Validation with an array

 // CODE BASE
 const handleRenderLineItems = () => {
        return medicinesSubmitData.filter(m => !deletedArray.includes(m.id)).map((medicine, index) => (
              <Grid id={'m-unit_' + medicine.id} key={'mdc-update-' + index} 
              container justifyContent="flex" className="ou-mt-2">
                <Grid item xs={5}>
                  <FormControl fullWidth>
                    <TextField
                      fullWidth
                      autoComplete="given-name"
                      className="!ou-pr-2"
                      variant="outlined"
                      id={'medicineName' + index}
                      name={`medicineSubmit[${index}].medicineName`}
                      value={medicine.medicineName}
                      type="text"
                      InputProps={{
                        readOnly: true,
                      }}
                      {...register(`medicineSubmit[${index}].medicineName`)}
                    />
                  </FormControl>
                </Grid>
                  
                <Grid item xs={3} className="ou-text-center">
                  <div className="ou-flex">
                  <TextField
                    fullWidth
                    autoComplete="given-name"
                    className="!ou-px-2"
                    variant="outlined"
                    id={'medicineUses_' + index}
                    name={`medicineSubmit[${index}].uses`}
                    type="text"
                    // defaultValue={medicine.uses}
                    {...register(`medicineSubmit[${index}].uses`)}
                    error={!!errors.medicineSubmit?.[index]?.uses}
                    helperText={errors.medicineSubmit?.[index]?.uses?.message}
                  />
                  </div>

                </Grid>
    
                <Grid item xs={3} className="ou-text-center">
                  <div className="ou-flex">
                  <TextField
                    fullWidth
                    autoComplete="given-name"
                    className="!ou-pl-2"
                    variant="outlined"
                    id={'medicineQuantity_' + index}
                    // defaultValue={medicine.quantity}
                    name={`medicineSubmit[${index}].quantity`}
                    type="number"
                    {...register(`medicineSubmit[${index}].quantity`)}
                    error={!!errors.medicineSubmit?.[index]?.quantity}
                    helperText={errors.medicineSubmit?.[index]?.quantity?.message}
                    >
                      <span>{medicine.quantity}</span>

                    </TextField>
                
                  </div>
                </Grid>
    
                <Grid item xs={1} className="ou-pl-2 ou-flex">
                  <Button
                    type="button"
                    // onClick={() => handleDeleteLineItem(medicine.id)}
                    onClick={() => addItemDeleted(medicine.id)}
                    className="ou-text-red-700"
                    sx={{ color: "red", width: '100%', height: '100%' }}>
                    <RemoveCircleIcon />
                  </Button>
                </Grid>
                    
              </Grid>
        ))

    }
  

input data:

{
  "medicineSubmit": [
    {
      "medicineName": "SPA",
      "uses": "1",
      "quantity": 1232
    },
    {
      "medicineName": "SPB",
      "uses": "1",
      "quantity": 1
    }
  ]
}
// Dựa vào input data ở trên kết quả validate 
// từ 1 object có các khái quát như sau
const medicineSubmitUpdateSchema = Yup.object({
    medicineSubmit: Yup.array().of(
        Yup.object().shape({
            uses: Yup.string().trim()
                .required(t('yupUsesRequired'))
                .max(100, t('yupUsesMaxLenght'))
                .matches(REGEX_ADDRESS, t('yupUsesInvalid')),
            quantity: Yup.string(t('yupQuantityNumber')).trim()
                .max(3, t('yupQuantityMax'))
                .required(t('yupQuantityRequired'))
                .matches(REGEX_NUMBER999, t('yupQuantityInvalid')),
        })
    )
});

[
  { "uses": "Pain relief", "quantity": "100" },
  { "uses": "Cold and flu", "quantity": "200" }
]

// Dựa vào input data trên -> ta cần validate như sau 

const schema = Yup.array().of(
  Yup.object().shape({
    uses: Yup.string().required(),
    quantity: Yup.string().required(),
  })
);