How do I satisfy a form structure?

[gajraj-gan]

I have component which needs a form of following structure. One of the keys will satisfy this strucure.

[someKey : string]: {
  startTime: number;
  endTime: number;
}

The rest of the keys in form can be anything else.

The component uses the startTime and endTime.

useWatch({ control, name: ${name}.startTime})

How do I ensure the form satisfies the type of structure and that name (i.e. value of someKey) does not breaks the type in the useWatch ?

[sujinleeme]

The form structure's (each field name) safety in your application is ensured by utilising TypeScript's type inference capabilities.

When you provide defaultValues or values in the useForm(), TypeScript can infer the types of the form fields based on the provided initial values. This inference helps TypeScript understand the structure of the form data, including the types of individual fields.

However, if you don't want to provide defaultValues or values in the useForm() you can fill in the generic parameter useForm<>.

useForm<{
 startTime: number;
 endTime: number;
}>