refactor(FE): Improve expense form validation messages

This commit is contained in:
rstubryan
2026-01-17 21:30:03 +07:00
parent df550abc46
commit ccf535cbd9
3 changed files with 107 additions and 9 deletions
@@ -192,6 +192,7 @@ const ExpenseRequestForm = ({
const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
formik.setFieldTouched('location', true);
formik.setFieldTouched('location_id', true);
formik.setFieldValue('location', val);
const locationId = Array.isArray(val) ? val[0]?.value : val?.value;
@@ -268,6 +269,7 @@ const ExpenseRequestForm = ({
const supplierChangeHandler = (val: OptionType | OptionType[] | null) => {
formik.setFieldTouched('supplier', true);
formik.setFieldTouched('supplier_id', true);
formik.setFieldValue('supplier', val);
const supplierId = Array.isArray(val) ? val[0]?.value : val?.value;
@@ -407,6 +409,16 @@ const ExpenseRequestForm = ({
placeholder='Pilih Kategori'
value={formik.values.category}
onChange={categoryChangeHandler}
isError={
formik.touched.category && Boolean(formik.errors.category)
}
errorMessage={
formik.touched.category && formik.errors.category
? typeof formik.errors.category === 'object'
? 'Kategori wajib diisi!'
: (formik.errors.category as string)
: undefined
}
options={[
{
value: 'BOP',
@@ -426,6 +438,10 @@ const ExpenseRequestForm = ({
placeholder='Pilih Lokasi'
value={formik.values.location}
onChange={locationChangeHandler}
isError={
formik.touched.location_id && Boolean(formik.errors.location_id)
}
errorMessage={formik.errors.location_id as string}
options={locationOptions}
isLoading={isLoadingLocationOptions}
onInputChange={setLocationInputValue}
@@ -438,6 +454,12 @@ const ExpenseRequestForm = ({
required
value={formik.values.transaction_date}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
isError={
formik.touched.transaction_date &&
Boolean(formik.errors.transaction_date)
}
errorMessage={formik.errors.transaction_date as string}
className={{
wrapper: 'col-span-12 sm:col-span-4',
}}
@@ -459,6 +481,16 @@ const ExpenseRequestForm = ({
placeholder='Pilih Vendor'
value={formik.values.supplier}
onChange={supplierChangeHandler}
isError={
formik.touched.supplier_id && Boolean(formik.errors.supplier_id)
}
errorMessage={
formik.touched.supplier_id && formik.errors.supplier_id
? typeof formik.errors.supplier_id === 'object'
? 'Vendor wajib diisi!'
: (formik.errors.supplier_id as string)
: undefined
}
options={supplierOptions}
isLoading={isLoadingVendorOptions}
onInputChange={setVendorInputValue}