Input validation using yup

[manuel-subredu]

Is it possible to use yup validation for Form fields provided by CloudScape ? Without CloudScape, code is something like:

...
const formSchema = yup.object().shape({
    name: yup.string()
});
...
<FormField
  label="Name"
  errorText={errors.name && <p>{errors.name.message}</p>}
>
 <input
    {...register('name')}
 />
</FormField>
...

If I try the same approach using Input, when I try to update the value from the browser I get:

ERROR
target is undefined

[abdhalees]

Hello Manuel,

from your code it looks like you're using react-hook-form, instead of using register you can use controller, so your component will look like this:

import  Input  from "@cloudscape-design/components/input"
import  Button  from "@cloudscape-design/components/button"
import  FormField  from "@cloudscape-design/components/form-field"
import { useForm, Controller } from "react-hook-form"


function App() {
  const { handleSubmit, control } = useForm<FormValues>()


  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
    <FormField label={label}   errorText={errors.name && <p>{errors.name.message}</p>}>
      <Controller
        control={control}
        name={name}
        render={({ field: { onChange, onBlur, value, ref } }) => (
          <Input
            onChange={onChange}
            onBlur={onBlur}
            value={value}
            name={name}
          />
        )}
      />
    </FormField>
      <Button> Submit </Button>
    </form>
  )
}

and then you can follow this example from ReactHookForm to how to integrate yup with useForm hook