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

Question

I have a generic rules for my form item:

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

What I would like to do is for an empty input display not red, but orange formatting, similar to validateStatus='warning' .
In other words - when the rule clicks - show orange warning like this:

Is that possible w\o explicitly interacting with form state via useForm ? (wouldn't wanna do that)

Answer 1

It seems that you can only set validateStatus to 'warning' to show warning style.

Here's how it works to set validateStatus in source code of FormItem. When validateStatus is undefined, mergedValidateStatus can only be '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

If you add warningOnly: true to your rule, the user will not be blocked from submitting and you'll get the desired behavior.

More info at https://ant.design/components/form/#Rule