feat : update validation
This commit is contained in:
@@ -20,6 +20,10 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
|
||||
idGroup: ""
|
||||
})
|
||||
const [listGroup, setListGorup] = useState<IDataPosition[]>([])
|
||||
const [touched, setTouched] = useState({
|
||||
name: false,
|
||||
idGroup: false
|
||||
});
|
||||
|
||||
function onCLose() {
|
||||
onUpdated(true)
|
||||
@@ -153,7 +157,10 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
|
||||
}
|
||||
value={String(data.idGroup)}
|
||||
mb={5}
|
||||
onChange={(val) => setData({ ...data, idGroup: val })}
|
||||
onChange={(val) => {
|
||||
setData({ ...data, idGroup: val })
|
||||
setTouched({ ...touched, idGroup: false })
|
||||
}}
|
||||
withAsterisk
|
||||
styles={{
|
||||
input: {
|
||||
@@ -162,6 +169,12 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
|
||||
borderColor: WARNA.biruTua,
|
||||
},
|
||||
}}
|
||||
error={
|
||||
touched.idGroup && (
|
||||
data.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
|
||||
)
|
||||
}
|
||||
onBlur={() => setTouched({ ...touched, idGroup: true })}
|
||||
/>
|
||||
<TextInput
|
||||
label="Jabatan"
|
||||
@@ -172,10 +185,20 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
|
||||
borderColor: WARNA.biruTua,
|
||||
},
|
||||
}}
|
||||
required
|
||||
my={15}
|
||||
size="md"
|
||||
value={String(data.name)}
|
||||
onChange={(e) => setData({ ...data, name: e.target.value })}
|
||||
onChange={(e) => {
|
||||
setData({ ...data, name: e.target.value })
|
||||
setTouched({ ...touched, name: false })
|
||||
}}
|
||||
onBlur={() => setTouched({ ...touched, name: true })}
|
||||
error={
|
||||
touched.name && (
|
||||
data.name == "" ? "Nama Jabatan Tidak Boleh Kosong" : null
|
||||
)
|
||||
}
|
||||
radius={10}
|
||||
placeholder="Nama Jabatan"
|
||||
/>
|
||||
|
||||
@@ -14,6 +14,10 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
|
||||
const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
|
||||
const router = useRouter()
|
||||
const [listGroup, setListGorup] = useState<IDataGroup[]>([])
|
||||
const [touched, setTouched] = useState({
|
||||
name: false,
|
||||
idGroup: false
|
||||
});
|
||||
|
||||
const [listData, setListData] = useState({
|
||||
name: "",
|
||||
@@ -101,10 +105,13 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
|
||||
radius={10}
|
||||
mb={5}
|
||||
withAsterisk
|
||||
onChange={(val: any) => setListData({
|
||||
...listData,
|
||||
idGroup: val
|
||||
})}
|
||||
onChange={(val: any) => {
|
||||
setListData({
|
||||
...listData,
|
||||
idGroup: val
|
||||
})
|
||||
setTouched({ ...touched, idGroup: false })
|
||||
}}
|
||||
styles={{
|
||||
input: {
|
||||
color: WARNA.biruTua,
|
||||
@@ -112,6 +119,13 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
|
||||
borderColor: WARNA.biruTua,
|
||||
},
|
||||
}}
|
||||
error={
|
||||
touched.idGroup && (
|
||||
listData.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
|
||||
)
|
||||
}
|
||||
onFocus={() => setTouched({ ...touched, idGroup: true })}
|
||||
onBlur={() => setTouched({ ...touched, idGroup: true })}
|
||||
/>
|
||||
<TextInput
|
||||
label="Jabatan"
|
||||
@@ -124,12 +138,23 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
|
||||
}}
|
||||
my={15}
|
||||
size="md"
|
||||
onChange={(event: any) => setListData({
|
||||
...listData,
|
||||
name: event.target.value
|
||||
})}
|
||||
onChange={(event: any) => {
|
||||
setListData({
|
||||
...listData,
|
||||
name: event.target.value
|
||||
})
|
||||
setTouched({ ...touched, name: false })
|
||||
}}
|
||||
radius={10}
|
||||
placeholder="Nama Jabatan"
|
||||
error={
|
||||
touched.name && (
|
||||
listData.name == "" ? "Nama Jabatan Tidak Boleh Kosong" : null
|
||||
)
|
||||
}
|
||||
onFocus={() => setTouched({ ...touched, name: true })}
|
||||
onBlur={() => setTouched({ ...touched, name: true })}
|
||||
required
|
||||
/>
|
||||
<Box mt={'xl'}>
|
||||
<Button
|
||||
|
||||
Reference in New Issue
Block a user