React Hook Form中MUI控件的条件性错误处理：实现字段按需必填

你之前尝试给React Hook Form的Controller组件设置条件必填时写法有误，导致规则不生效。问题出在你用了{condition && rules ={{ required: "This field is required" }}}这种错误的JSX属性语法——JSX属性只能直接传递值，不能做赋值操作。

下面是几种可行的解决方法：

方法1：直接在required规则中嵌入条件判断 #

把required的取值设为条件表达式，当condition为true时启用必填校验，否则关闭：

<Controller
  name="InvoicingAddress.address_line_1"
  control={control}
  rules={{
    required: condition ? "This field is required" : false
  }}
  render={({ field: { onChange, value } }) => (
    <Input
      theme={theme}
      fullWidth={true}
      label="Address Line 1"
      placeholder="House number, street name"
      type="text"
      onChange={onChange}
      value={value}
      error={errors?.InvoicingAddress?.address_line_1?.message}
    />
  )}
/>

方法2：动态生成完整的rules对象 #

如果需要组合更多校验规则，可以根据条件直接生成整个rules对象：

<Controller
  name="InvoicingAddress.address_line_1"
  control={control}
  rules={condition ? { required: "This field is required" } : {}}
  render={({ field: { onChange, value } }) => (
    <Input
      theme={theme}
      fullWidth={true}
      label="Address Line 1"
      placeholder="House number, street name"
      type="text"
      onChange={onChange}
      value={value}
      error={errors?.InvoicingAddress?.address_line_1?.message}
    />
  )}
/>

方法3：用函数封装复杂规则逻辑 #

如果你的条件判断逻辑比较复杂（比如要结合多个变量），可以把规则生成逻辑抽成单独函数：

// 外部定义规则生成函数
const getAddressValidationRules = () => {
  if (condition) {
    return { required: "This field is required" };
  }
  // 这里可以添加其他规则，比如minLength等
  return {};
};

// 在组件中使用
<Controller
  name="InvoicingAddress.address_line_1"
  control={control}
  rules={getAddressValidationRules()}
  render={({ field: { onChange, value } }) => (
    <Input
      theme={theme}
      fullWidth={true}
      label="Address Line 1"
      placeholder="House number, street name"
      type="text"
      onChange={onChange}
      value={value}
      error={errors?.InvoicingAddress?.address_line_1?.message}
    />
  )}
/>

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