CODEWITHSUNDEEP
reactjsmaterial-uireact-hook-form
Elodie
Elodie

Reputation: 137

How to display an error message with react hook form in a useFieldArray

Language used: I am using javascript with react, react hook form and material ui

What I want to do: I am trying to handle an error message if onSubmit my value is empty.

Problematic: my input is in an array of multiple object, so I cannot access the errors. ({`${fieldArrayName}.${index}.os`})

import {
  FormControl,
  FormHelperText,
  InputLabel,
  MenuItem,
  Select,
} from '@mui/material';
import React from 'react';
import { ErrorMessage } from '@hookform/error-message';
import { Controller } from 'react-hook-form';

export const Os = ({ fieldArrayName, index, register, control, errors }) => {
  return (
    <FormControl>
      <InputLabel id="demo-simple-select-label">Os</InputLabel>
      <Controller
        name={`${fieldArrayName}.${index}.os`}
        control={control}
        defaultValue=""
        rules={{ required: true }}
        render={({ field }) => (
          <Select
            {...field}
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            label="Os"
          >
            <MenuItem value="windows">Windows</MenuItem>
            <MenuItem value="linux">Linux</MenuItem>
          </Select>
        )}
      />{' '}
      <FormHelperText error={true}></FormHelperText>
    </FormControl>
  );
};

What I have tried :

<ErrorMessage errors={errors} name={`${fieldArrayName}.${index}.os`} />

Upvotes: 1

Views: 4145

Answers (1)

Nafis Nihal
Nafis Nihal

Reputation: 26

I would do it in this way

you can try this destructuring

<Box>
          <Controller
            name={`${fieldArrayName}.${index}.os`}
            control={control}
            defaultValue=""
            rules={{
              required: {
                value: true,
                message: 'os is required',
              },
            }}
            render={({ field: { value, onChange }, fieldState: { error } }) => (
                <TextField
                  id="form-input-division"
                  variant="outlined"
                  select
                  error={Boolean(error)}
                  helperText={Boolean(error) && error?.message}
                  value={value || 'default'}
                  onChange={(e) => {
                    onChange(e.target.value);
                  }}
                >
                  <MenuItem value="windows">Windows</MenuItem>
                  <MenuItem value="linux">Linux</MenuItem>
                  ))}
                </TextField>
            )}
          />
</Box>

Upvotes: 1

Related Questions