Componente de formulario de diseño de hormiga de la interfaz de usuario de ReactJS

. El componente de formulario se utiliza cuando el usuario necesita crear una instancia o recopilar información. Podemos usar el siguiente enfoque en ReactJS para usar el componente de formulario de diseño Ant.

Accesorios de formulario:

• dos puntos: Se utiliza para configurar el valor predeterminado de dos puntos para Form.Item.
• componente: Se utiliza para establecer el elemento de representación del formulario.
• campos: Se utiliza para denotar el control de los campos del formulario a través de la gestión del estado.
• formulario: se utiliza para indicar la instancia de control de formulario creada por Form.useForm().
• initialValues: se utiliza para establecer el valor mediante la inicialización o el restablecimiento del formulario.
• labelAlign: se utiliza para indicar la alineación de texto de la etiqueta de todos los elementos.
• labelCol: se utiliza para indicar el diseño de la etiqueta, como el componente <Col>.
• diseño: se utiliza para denotar el diseño del formulario.
• nombre: Se utiliza para denotar el nombre del formulario.
• preservar: se utiliza para mantener el valor del campo incluso cuando el campo se eliminó.
• requiredMark: Se utiliza para el estilo de marca Requerido.
• scrollToFirstError: se utiliza para el desplazamiento automático al primer campo fallido al enviar.
• tamaño: Se utiliza para establecer el tamaño del componente de campo.
• Validar mensajes: se utiliza para la plantilla de solicitud de validación.
• validar Trigger: se utiliza para indicar el activador de validación del campo de configuración.
• wrapperCol: se utiliza para indicar el diseño de los controles de entrada.
• onFieldsChange: es una función de devolución de llamada que se activa cuando se actualiza el campo.
• onFinish: es una función de devolución de llamada que se activa después de enviar el formulario y verificar los datos con éxito.
• onFinishFailed: es una función de devolución de llamada que se activa después de enviar el formulario y la verificación de datos falló.
• onValuesChange: es una función de devolución de llamada que se activa cuando se actualiza el valor.

Accesorios de elementos de formulario:

• dos puntos: se usa con la etiqueta, ya sea para mostrar el color (:) después del texto de la etiqueta.
• dependencias: Se utiliza para establecer el campo de dependencia.
• extra: se utiliza para denotar el mensaje de solicitud adicional.
• getValueFromEvent: se utiliza para especificar cómo obtener valor del evento u otros argumentos onChange .
• getValueProps: se utiliza para obtener los accesorios adicionales con subcomponente.
• hasFeedback: Se utiliza con estado de validación y esta opción especifica el icono de estado de validación.
• ayuda: se utiliza para denotar el mensaje de aviso.
• hidden: Se utiliza para indicar si ocultar o no Form.Item .
• htmlFor: se utiliza para establecer la subetiqueta htmlFor.
• initialValue: se utiliza para configurar el valor predeterminado secundario.
• etiqueta: Se utiliza para denotar el texto de la etiqueta.
• labelAlign: se utiliza para indicar la alineación de texto de la etiqueta.
• labelCol: se utiliza para indicar el diseño de la etiqueta.
• messageVariables: se utiliza para indicar la información de campo de validación predeterminada.
• nombre: Se utiliza para denotar el nombre.
• normalizar: se utiliza para normalizar el valor del valor del componente antes de pasar a la instancia del formulario.
• noStyle: Se utiliza como un control de campo puro.
• preservar: se utiliza para mantener el valor del campo incluso cuando el campo se eliminó.
• requerido: Se utiliza para mostrar el estilo requerido. y es generado por la regla de validación.
• reglas: se utiliza para indicar las reglas para la validación de campos.
• shouldUpdate: Se utiliza para la lógica de actualización de campos personalizados.
• información sobre herramientas: se utiliza para configurar la información sobre herramientas.
• disparador: Se usa para indicar cuándo recolectar el valor del Node hijo.
• validarPrimero: Se utiliza para indicar si dejar de validar en la primera regla de error para este campo.
• validateStatus: se utiliza para indicar el estado de validación.
• validar Trigger: Se utiliza para indicar cuándo validar el valor del Node hijo.
• valuePropName: se utiliza para indicar los accesorios del Node secundario.
• wrapperCol: se utiliza para indicar el diseño de los controles de entrada.

Accesorios de Form.List:

• niños: Es una función de renderizado.
• initialValue: se utiliza para indicar un valor predeterminado secundario de configuración.
• nombre: Se utiliza para denotar el nombre del campo.
• rules: Se utiliza para las reglas de validación.

Accesorios Form.ErrorList:

• errores: se utiliza para indicar la lista de errores.

Apoyos de Form.Provider:

• onFormChange: es una función de devolución de llamada que se activa cuando un campo de subformulario actualiza la función.
• onFormFinish: es una función de devolución de llamada que se activa cuando se envía un subformulario.

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

  cd foldername

• Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

  npm install antd

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from 'react'
import "antd/dist/antd.css";
import { Form, Button, Input } from 'antd';
  
export default function App() {
  
    return (
        <div style={{
            display: 'block', width: 700, padding: 30
        }}>
            <h4>ReactJS Ant-Design Form Component</h4>
            <Form
                name="basicform"
                onFinishFailed={() => alert('Failed to submit')}
                onFinish={() => alert('Form Submitted')}
                initialValues={{ remember: true }}
            >
             <Form.Item
              label="Enter username"
              name="Username"
              rules={[{ required: true, message: 'Please enter username' }]}
             >
              <Input />
             </Form.Item>
             <Form.Item>
              <Button type="success" htmlType="submit">
               Submit Username
              </Button>
             </Form.Item>
            </Form>
        </div>
    );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Referencia: https://ant.design/components/form/