Hello together,
I would like to introduce complex form, with some sub categories like sender, reciever. most convinient way to solve this, is to use dot (.) for naming the components
const myForm = {
Product: productList[1],
Sender: {
Salutation: salutations[0],
Title: '',
Name: '',
Company: 'Test',
},
Receiver: {
Salutation: salutations[0],
Title: '',
Name: '',
Company: '',
}
};
const { handleSubmit, register, getFieldId, formState, getValues, trigger } = useForm({ defaultValues: myForm });
...
<Label labelFor={getFieldId("Product")}>Product<RequiredAsterisk /></Label>
<Select {...register("Product", { required: 'Choose one product'} )} options={productList} onBlur={productEntryChanged}/>
formState.errors.Product && (<ErrorMessage>{formState.errors.Product.message}</ErrorMessage>)}
<Label labelFor={getFieldId("Receiver.Title")}>Title</Label>
<Textfield {...register("Receiver.Title", { maxLength: 20 })} type="text" />
<Label labelFor={getFieldId("Receiver.Company")}>Company name <RequiredAsterisk /></Label>
<Textfield {...register("Receiver.Company", { maxLength: 50, required: true })} type="text" />
if I try to submit the form, all other fields are shown as errored except every field with dot in name of the register function.
so no company, for sender or reciever are validated correctly. If i change the name to one without the dot, like “Receiver_Company” validation works fine, by my object is destroyed. I name to change from complex to plain object. Is it a bug, or knowing issue or kind of limitation in naming?
The value of Sender.Company set correctly in the input value, to “Test”
error is registered
but the field itself is not marked red
other fields are marked red, that has depth 0