如何移除MUI X DatePicker辅助文本必填*及表单组件验证方法

一、移除DatePicker的helperText必填*（保存/输入日期后） #

核心思路是通过react-hook-form的formState获取表单提交状态、字段值状态，动态控制helperText的显示逻辑：

1. 从useForm返回值中解构formState的isSubmitted（判断用户是否点击过保存按钮）；
2. 给DatePicker的helperText设置条件：仅当表单已提交且字段无值时，显示必填提示；输入日期后字段有值，自动隐藏提示。

修改你的Controller代码如下：

<Controller
  name="date"
  control={control}
  rules={{ required: true }}
  render={({ field, fieldState: { error } }) => {
    const { value } = field;
    const showRequiredTip = formState.isSubmitted && !value;
    return (
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DatePicker
          {...field}
          label="Date"
          slotProps={{
            textField: {
              helperText: showRequiredTip ? "必填" : error?.message || "",
              error: !!error
            }
          }}
        />
      </LocalizationProvider>
    );
  }}
/>

• 点击保存后，若日期为空则显示"必填"提示；输入日期后，value存在，showRequiredTip变为false，helperText自动清空；
• 若字段验证失败（比如提交时仍为空），会优先显示react-hook-form的错误信息。

二、React-Hook-Form + MUI 对Radio/Dropdown/Checkboxes的验证 #

1. 单选按钮（Radio Button） #

用MUI的RadioGroup配合Controller，绑定字段值与验证规则：

<Controller
  name="gender"
  control={control}
  rules={{ required: "请选择性别" }}
  render={({ field, fieldState: { error } }) => (
    <FormControl error={!!error}>
      <FormLabel>性别</FormLabel>
      <RadioGroup {...field} row>
        <FormControlLabel value="male" control={<Radio />} label="男" />
        <FormControlLabel value="female" control={<Radio />} label="女" />
      </RadioGroup>
      {error && <FormHelperText>{error.message}</FormHelperText>}
    </FormControl>
  )}
/>

2. 下拉选择框（Dropdown/Select） #

包裹MUI的Select组件，设置必填规则即可：

<Controller
  name="city"
  control={control}
  rules={{ required: "请选择城市" }}
  render={({ field, fieldState: { error } }) => (
    <FormControl error={!!error} fullWidth>
      <InputLabel>城市</InputLabel>
      <Select {...field} label="城市">
        <MenuItem value="beijing">北京</MenuItem>
        <MenuItem value="shanghai">上海</MenuItem>
        <MenuItem value="guangzhou">广州</MenuItem>
      </Select>
      {error && <FormHelperText>{error.message}</FormHelperText>}
    </FormControl>
  )}
/>

3. 复选框（Checkboxes） #

分两种常用场景：

单个复选框（如同意服务条款）

<Controller
  name="agree"
  control={control}
  rules={{ required: "请同意服务条款" }}
  render={({ field, fieldState: { error } }) => (
    <FormControlLabel
      control={<Checkbox {...field} checked={field.value} />}
      label="我同意服务条款"
      error={!!error}
    />
  )}
/>
{errors.agree && <FormHelperText error>{errors.agree.message}</FormHelperText>}

多个复选框（多选选项）

将字段值设为数组，验证规则可设置最小选择数量：

<Controller
  name="hobbies"
  control={control}
  rules={{ 
    required: "请至少选择一个爱好",
    minLength: { value: 1, message: "请至少选择一个爱好" }
  }}
  render={({ field, fieldState: { error } }) => (
    <FormControl error={!!error}>
      <FormLabel>爱好</FormLabel>
      <Box>
        {["reading", "sports", "music"].map(hobby => (
          <FormControlLabel
            key={hobby}
            control={
              <Checkbox
                checked={field.value?.includes(hobby)}
                onChange={(e) => {
                  const newValue = field.value || [];
                  field.onChange(
                    e.target.checked 
                      ? [...newValue, hobby] 
                      : newValue.filter(item => item !== hobby)
                  );
                }}
              />
            }
            label={hobby === "reading" ? "阅读" : hobby === "sports" ? "运动" : "音乐"}
          />
        ))}
      </Box>
      {error && <FormHelperText>{error.message}</FormHelperText>}
    </FormControl>
  )}
/>

内容的提问来源于stack exchange，提问作者jeevan