How to use react-hook-form with material-ui Select component

[daveOnactive]

<Select ..... onChange={e => register({ name: 'nationality', value: e.target.value})} > ..... </Select>
i invoked the register method and passed it an object with name(key) value(value) in the onChange props

[bluebill1049]

there is an example in the doc right: https://codesandbox.io/s/react-hook-form-v6-controller-qsd8r?file=/src/index.js?

[mvsantosph]

The examples need to be updated, the Select in this link is using "as=" instead of "render="

[mvsantosph]

Let me say that most of the examples of react-hook-form are incomplete. The project needs to follow a mandatory CRUD rule and implement in the examples. How can I deliver a project that doesn't validate some kind of fields like Select?

[mvsantosph]

Yeah, I pass the last 12 hours reading the documentation, coding hard and can't find any complete example of a Select validation with Material UI. Read again "Material UI". I'm not talking about the other Select examples

How can I deliver a form validation with just this?

Link: https://codesandbox.io/s/react-hook-form-controller-079xx?file=/src/index.js

I recognize that react-hook-form got a good documentation of the components and their partials but how to combine them with the many UI solutions there?

A complete example I mean:

• With error highlight on submit
• With defaultValue support
• Erasing error highlight onChange

[bluebill1049]

How can I deliver a project that doesn't validate some kind of fields like Select?

[mvsantosph]

It's not clear for me and also don't have a complete example on material UI. Validate is not the only thing to do in a CRUD.

[mvsantosph]

Think a little bit with me: if only the API is sufficient to make an input work 100% on a CRUD page why is so many people asking about the react-hook-form combined with UI frameworks? Do already see the questions on stackoverflow? I'm not here to disturb anyone, I'm here because I have doubt's too. And the fact is the examples are incomplete, the API is OK. That's it, dot.

I'm really out of time right now, but I can help the project with this in the future.

[yanolsh92]

@mvsantosph
I suffered from the same problem. But I was able to find solution
<Controller name='type' control={control} render={({ field }) => ( <TextField {...field} fullWidth select variant='outlined' label='label' error={!!errors.type} required helperText={errors.type ? errors.type?.message : ''} margin='dense'> {vesselTypes.map((singleType) => ( <MenuItem key={singleType.value} value={singleType.value}> {singleType.name} </MenuItem> ))} </TextField> )} />