Handling Conditional Field Display in React Hook Form with TypeScript - implementing Missing Values
I tried several approaches but none seem to work. I'm working on a personal project and I'm working on a form using React Hook Form (v7) in a TypeScript project, and I'm running into issues with conditionally displaying fields based on the selection of a dropdown... I want to show a date input field only if the user selects the option 'Other' from a predefined set of options. The question arises when the form submits and the selected value is 'Other', but the date input is not filled, leading to an unexpected validation behavior. Here’s a simplified version of my component: ```tsx import React from 'react'; import { useForm } from 'react-hook-form'; interface FormValues { type: string; date?: string; } const MyForm: React.FC = () => { const { register, handleSubmit, watch, formState: { errors } } = useForm<FormValues>(); const selectedType = watch('type'); const onSubmit = (data: FormValues) => { console.log(data); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <label> Type: <select {...register('type', { required: true })}> <option value="">Select...</option> <option value="Option1">Option 1</option> <option value="Other">Other</option> </select> </label> {selectedType === 'Other' && ( <label> Date: <input type="date" {...register('date', { required: selectedType === 'Other' })} /> </label> )} {errors.date && <span>This field is required when 'Other' is selected</span>} <button type="submit">Submit</button> </form> ); }; export default MyForm; ``` I have tried using the `required` validation conditionally based on the selected option, but even when I select 'Other' and leave the date field empty, it still validates as required. The behavior message appears correctly, but the submission is not handled as expected, and I don't see the console log output for a successful submission when the date is empty. Is there something wrong with how I’m registering the date field? Do I need to handle it differently to avoid the validation behavior? Any help would be appreciated! My development environment is macOS. Thanks in advance! I'm using Typescript stable in this project. Could this be a known issue? I've been using Typescript for about a year now.