require name to submit style preset

This commit is contained in:
Mary Hipp 2024-08-08 15:53:21 -04:00
parent 5f83bb0069
commit 9be6acde7d
2 changed files with 7 additions and 4 deletions

View File

@ -26,13 +26,14 @@ export const StylePresetForm = ({ updatingStylePresetId }: { updatingStylePreset
const defaultValues = useAppSelector((s) => s.stylePresetModal.prefilledFormData); const defaultValues = useAppSelector((s) => s.stylePresetModal.prefilledFormData);
const { handleSubmit, control, register } = useForm<StylePresetFormData>({ const { handleSubmit, control, register, formState } = useForm<StylePresetFormData>({
defaultValues: defaultValues || { defaultValues: defaultValues || {
name: '', name: '',
positivePrompt: '', positivePrompt: '',
negativePrompt: '', negativePrompt: '',
image: null, image: null,
}, },
mode: 'onChange',
}); });
const handleClickSave = useCallback<SubmitHandler<StylePresetFormData>>( const handleClickSave = useCallback<SubmitHandler<StylePresetFormData>>(
@ -72,7 +73,7 @@ export const StylePresetForm = ({ updatingStylePresetId }: { updatingStylePreset
<StylePresetImageField control={control} name="image" /> <StylePresetImageField control={control} name="image" />
<FormControl orientation="vertical"> <FormControl orientation="vertical">
<FormLabel>{t('stylePresets.name')}</FormLabel> <FormLabel>{t('stylePresets.name')}</FormLabel>
<Input size="md" {...register('name')} /> <Input size="md" {...register('name', { required: true, minLength: 1 })} required={true} />
</FormControl> </FormControl>
</Flex> </Flex>
@ -81,7 +82,9 @@ export const StylePresetForm = ({ updatingStylePresetId }: { updatingStylePreset
<Text variant="subtext">{t('stylePresets.placeholderDirections')}</Text> <Text variant="subtext">{t('stylePresets.placeholderDirections')}</Text>
<Flex justifyContent="flex-end"> <Flex justifyContent="flex-end">
<Button onClick={handleSubmit(handleClickSave)}>{t('common.save')}</Button> <Button onClick={handleSubmit(handleClickSave)} isDisabled={!formState.isValid}>
{t('common.save')}
</Button>
</Flex> </Flex>
</Flex> </Flex>
); );

View File

@ -69,7 +69,7 @@ export const StylePresetMenu = () => {
{data.presets.length === 0 && data.defaultPresets.length === 0 && ( {data.presets.length === 0 && data.defaultPresets.length === 0 && (
<Text m="20px" textAlign="center"> <Text m="20px" textAlign="center">
{t('stylePrests.noMatchingTemplates')} {t('stylePresets.noMatchingTemplates')}
</Text> </Text>
)} )}