0
356
ViewsFormulario de diseño de hormigas. Estilo de validación de elementos.
¿Es posible agregar un accesorio className a la validación de Form.Item?
<Form.Item name="username" rules={[ { required: true, message: '...' }, className="customValidation" //<- something like that, but it is not working ]}>Editar: ¡Anular los estilos de hormigas no es una solución válida!
3 answers
Answer question0
Si desea cambiar el estilo de los mensajes de validación/color del borde de entrada sin usar la propiedad className, puede usar la siguiente solución.
El siguiente código cambiará el color del mensaje de error y el color del borde de entrada de rojo a azul (puede agregar sus propiedades CSS).
índice.css
.ant-form-item-has-error :not(.ant-input-disabled):not(.ant-input-borderless).ant- input, .ant-form-item-has-error :not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper, .ant-form-item-has-error :not(.ant-input-number-affix-wrapper-disabled):not(.ant-input-number-affix-wrapper-borderless).ant-input-number-affix-wrapper, .ant-form-item-has-error :not(.ant-input-disabled):not(.ant-input-borderless).ant-input:hover, .ant-form-item-has-error :not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:hover, .ant-form-item-has-error :not(.ant-input-number-affix-wrapper-disabled):not(.ant- input-number-affix-wrapper-borderless).ant-input-number-affix-wrapper:hover { background-color: #fff; border-color: blue; } .ant-form-item-explain-error { color: blue; }índice.js
import React from 'react'; import ReactDOM from 'react-dom'; import 'antd/dist/antd.css'; import './index.css'; import { Form, Input, Button } from 'antd'; const Demo = () => { const onFinish = (values) => { console.log('Success:', values); }; const onFinishFailed = (errorInfo) => { console.log('Failed:', errorInfo); }; return ( <Form name="basic" labelCol={{ span: 8, }} wrapperCol={{ span: 16, }} onFinish={onFinish} onFinishFailed={onFinishFailed} > <Form.Item label="Username" name="username" rules={[ { required: true, message: 'Please enter your username!', }, ]} > <Input /> </Form.Item> <Form.Item wrapperCol={{ offset: 8, span: 16, }} > <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form> ); }; export default Demo;0
Creo que es imposible, no existe el atributo para agregar el className en antd Form.Item
Si quieres puedes usar el componente con estilo
Agrego mi código de ejemplo para usted a continuación.
export const CustomItem = styled(Form.Item)` .ant-form-item-explain.ant-form-item-explain-error { color: blue; } ` ------------------------------------------- <CustomItem name='name' label='Name' rules={[{ required: true }]} > <Input size='large' autoComplete='name' /> </CustomItem>Estaba funcionando para mí.
0
Creé un problema en GitHub y respondieron con
Form.Item admite className ahora.