feat: Add basic form validation for path input

This commit is contained in:
blessedcoolant 2023-07-12 20:11:05 +12:00
parent 310e401b03
commit 6238a53fdd
3 changed files with 20 additions and 23 deletions

View File

@ -66,13 +66,13 @@ export default function AddDiffusersModel() {
};
return (
<Flex overflow="scroll" maxHeight={window.innerHeight - 270}>
<Flex overflow="scroll" maxHeight={window.innerHeight - 270} width="100%">
<Formik
initialValues={addModelFormValues}
onSubmit={addModelFormSubmitHandler}
>
{({ handleSubmit, errors, touched }) => (
<IAIForm onSubmit={handleSubmit}>
<IAIForm onSubmit={handleSubmit} w="full">
<VStack rowGap={2}>
<IAIFormItemWrapper>
{/* Name */}
@ -90,7 +90,6 @@ export default function AddDiffusersModel() {
name="name"
type="text"
validate={baseValidation}
width="2xl"
isRequired
/>
{!!errors.name && touched.name ? (
@ -119,7 +118,6 @@ export default function AddDiffusersModel() {
id="description"
name="description"
type="text"
width="2xl"
isRequired
/>
{!!errors.description && touched.description ? (
@ -153,13 +151,7 @@ export default function AddDiffusersModel() {
{t('modelManager.modelLocation')}
</FormLabel>
<VStack alignItems="start">
<Field
as={IAIInput}
id="path"
name="path"
type="text"
width="2xl"
/>
<Field as={IAIInput} id="path" name="path" type="text" />
{!!errors.path && touched.path ? (
<FormErrorMessage>{errors.path}</FormErrorMessage>
) : (
@ -181,7 +173,6 @@ export default function AddDiffusersModel() {
id="repo_id"
name="repo_id"
type="text"
width="2xl"
/>
{!!errors.repo_id && touched.repo_id ? (
<FormErrorMessage>{errors.repo_id}</FormErrorMessage>
@ -220,7 +211,6 @@ export default function AddDiffusersModel() {
id="vae.path"
name="vae.path"
type="text"
width="2xl"
/>
{!!errors.vae?.path && touched.vae?.path ? (
<FormErrorMessage>{errors.vae?.path}</FormErrorMessage>
@ -245,7 +235,6 @@ export default function AddDiffusersModel() {
id="vae.repo_id"
name="vae.repo_id"
type="text"
width="2xl"
/>
{!!errors.vae?.repo_id && touched.vae?.repo_id ? (
<FormErrorMessage>{errors.vae?.repo_id}</FormErrorMessage>

View File

@ -8,11 +8,11 @@ import { useTranslation } from 'react-i18next';
import type { RootState } from 'app/store/store';
import IAIButton from 'common/components/IAIButton';
import IAIInput from 'common/components/IAIInput';
import IAIMantineSelect from 'common/components/IAIMantineSelect';
import { MODEL_TYPE_MAP } from 'features/system/components/ModelSelect';
import { makeToast } from 'app/components/Toaster';
import IAIMantineTextInput from 'common/components/IAIMantineInput';
import { addToast } from 'features/system/store/systemSlice';
import { useUpdateMainModelsMutation } from 'services/api/endpoints/models';
import { components } from 'services/api/schema';
@ -62,6 +62,10 @@ export default function CheckpointModelEdit(props: CheckpointModelEditProps) {
config: retrievedModel.config ? retrievedModel.config : '',
variant: retrievedModel.variant,
},
validate: {
path: (value) =>
value.trim().length === 0 ? 'Must provide a path' : null,
},
});
const editModelFormSubmitHandler = (values: CheckpointModelConfig) => {
@ -119,7 +123,7 @@ export default function CheckpointModelEdit(props: CheckpointModelEditProps) {
)}
>
<Flex flexDirection="column" overflowY="scroll" gap={4}>
<IAIInput
<IAIMantineTextInput
label={t('modelManager.description')}
{...checkpointEditForm.getInputProps('description')}
/>
@ -133,15 +137,15 @@ export default function CheckpointModelEdit(props: CheckpointModelEditProps) {
data={variantSelectData}
{...checkpointEditForm.getInputProps('variant')}
/>
<IAIInput
<IAIMantineTextInput
label={t('modelManager.modelLocation')}
{...checkpointEditForm.getInputProps('path')}
/>
<IAIInput
<IAIMantineTextInput
label={t('modelManager.vaeLocation')}
{...checkpointEditForm.getInputProps('vae')}
/>
<IAIInput
<IAIMantineTextInput
label={t('modelManager.config')}
{...checkpointEditForm.getInputProps('config')}
/>

View File

@ -9,7 +9,7 @@ import { useForm } from '@mantine/form';
import { makeToast } from 'app/components/Toaster';
import type { RootState } from 'app/store/store';
import IAIButton from 'common/components/IAIButton';
import IAIInput from 'common/components/IAIInput';
import IAIMantineTextInput from 'common/components/IAIMantineInput';
import IAIMantineSelect from 'common/components/IAIMantineSelect';
import { MODEL_TYPE_MAP } from 'features/system/components/ModelSelect';
import { addToast } from 'features/system/store/systemSlice';
@ -58,6 +58,10 @@ export default function DiffusersModelEdit(props: DiffusersModelEditProps) {
vae: retrievedModel.vae ? retrievedModel.vae : '',
variant: retrievedModel.variant,
},
validate: {
path: (value) =>
value.trim().length === 0 ? 'Must provide a path' : null,
},
});
const editModelFormSubmitHandler = (values: DiffusersModelConfig) => {
@ -107,7 +111,7 @@ export default function DiffusersModelEdit(props: DiffusersModelEditProps) {
)}
>
<Flex flexDirection="column" overflowY="scroll" gap={4}>
<IAIInput
<IAIMantineTextInput
label={t('modelManager.description')}
{...diffusersEditForm.getInputProps('description')}
/>
@ -121,11 +125,11 @@ export default function DiffusersModelEdit(props: DiffusersModelEditProps) {
data={variantSelectData}
{...diffusersEditForm.getInputProps('variant')}
/>
<IAIInput
<IAIMantineTextInput
label={t('modelManager.modelLocation')}
{...diffusersEditForm.getInputProps('path')}
/>
<IAIInput
<IAIMantineTextInput
label={t('modelManager.vaeLocation')}
{...diffusersEditForm.getInputProps('vae')}
/>