Descripción general del formulario React

    El componente de formulario en React se utiliza para configurar un formulario de contacto y/o una página de registro que se ajuste a los requisitos de cualquier aplicación. Puede proporcionar fácilmente la validación del formulario React, definir la orientación del formulario y también configurar o personalizar el diseño que desee. El componente de formulario React también expone eventos que le brindan la oportunidad de responder a las acciones del usuario.

    React Form Example

    El siguiente ejemplo representa IgrForm que tiene algunas entradas, botones y una casilla de verificación en su interior.

    Usage

    Primero, debe instalar el paquete Ignite UI for React npm correspondiente ejecutando el siguiente comando:

    npm install igniteui-react

    Luego necesitarás importar IgrForm, su CSS necesario y registrar su módulo, así:

    import { IgrFormModule, IgrForm } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrFormModule.register();

    La forma más sencilla de empezar a utilizar IgrForm es la siguiente:

    Los datos del formulario se recopilan para los siguientes componentes:

    Cuando un control de formulario no es válido, el formulario no se enviará y se mostrará un mensaje de error. Si desea especificar que los elementos del formulario no deben validarse cuando se envía el formulario, puede agregar el atributo novalidate al elemento IgrForm:

    <IgrForm novalidate="true"></IgrForm>

    Eventos

    El componente Formulario genera los siguientes eventos:

    • Enviar: se genera cuando se envía el formulario.
    • Restablecer: se genera cuando se restablece el formulario.

    A continuación se muestra un ejemplo que muestra cómo agregar un detector de eventos para el evento Submit:

    document.addEventListener('igcSubmit', function (event) {
  const customEvent = event as CustomEvent<FormData>;
  console.log(customEvent.detail);
});

    Methods

    El componente Formulario expone los siguientes métodos:

    Método Descripción
    Submit Envía los datos del formulario.
    Reset Restablece los datos del formulario.
    GetFormData Recopila los datos del formulario y devuelve un único objeto FormData.
    reportValidity Devuelve si los controles secundarios del elemento satisfacen sus restricciones de validación.

    API References

    Additional Resources