如何解决ant.d-表单-如何使用标准规则API显示警告?
我对表单项有一条通用规则:
<Form.Item
label="Username"
name="username"
rules={[{ required: true,message: 'Please input your username!' }]}
>
<Input />
</Form.Item>
我想做的是为空输入显示而不是红色,而是橙色格式,类似于validateStatus='warning'
。
换句话说-点击规则后-显示橙色警告,如下所示:
是否可以通过useForm
与表单状态进行显式交互? (不想这么做)
解决方法
似乎只能将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,};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。