ant.d - 表单 - 如何使用标准规则 API 显示警告？

Question

我的表单项有一个通用规则：

<Form.Item
        label="Username"
        name="username"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
</Form.Item>

我想做的是空输入显示不是红色，而是橙色格式，类似于validateStatus='warning' 。
换句话说 - 当规则点击时 - 显示橙色警告，如下所示：

是否可以通过useForm与表单 state 显式交互？ （不想那样做）

Answer 1

看来您只能将 validateStatus 设置为 'warning' 以显示警告样式。

这是在 FormItem 的源代码中设置 validateStatus 的工作原理。 当 validateStatus 未定义时，mergedValidateStatus 只能是 'validating', 'error', 'success'

let mergedValidateStatus: ValidateStatus = '';
if (validateStatus !== undefined) {
  mergedValidateStatus = validateStatus;
} else if (meta?.validating) {
  mergedValidateStatus = 'validating';
} else if (meta?.errors?.length || subErrorList.length) {
  mergedValidateStatus = 'error';
} else if (meta?.touched) {
  mergedValidateStatus = 'success';
}

const itemClassName = {
  [`${prefixCls}-item`]: true,
  [`${prefixCls}-item-with-help`]: domErrorVisible || !!help,
  [`${className}`]: !!className,

  // Status
  [`${prefixCls}-item-has-feedback`]: mergedValidateStatus && hasFeedback,
  [`${prefixCls}-item-has-success`]: mergedValidateStatus === 'success',
  [`${prefixCls}-item-has-warning`]: mergedValidateStatus === 'warning',
  [`${prefixCls}-item-has-error`]: mergedValidateStatus === 'error',
  [`${prefixCls}-item-is-validating`]: mergedValidateStatus === 'validating',
  [`${prefixCls}-item-hidden`]: hidden,
};

https://github.com/ant-design/ant-design/blob/8a264baf67322af5e786af13248311e89a1a8b05/components/form/FormItem.tsx#L178

Answer 2

如果您将warningOnly: true添加到您的规则，则不会阻止用户提交并且您将获得所需的行为。

更多信息在https://ant.design/components/form/#Rule