Descripción general del formulario Web Components
El componente de formulario en Web Components 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 validación de formularios Web Components, definir la orientación del formulario y también configurar o personalizar el diseño que desee. El componente de formulario Web Components también expone eventos que le brindan la oportunidad de responder a las acciones del usuario.
Web Components Form Example
El siguiente ejemplo representa IgcFormComponent que tiene algunas entradas, botones y una casilla de verificación en su interior.
Usage
Primero, debe instalar la Ignite UI for Web Components ejecutando el siguiente comando:
npm install igniteui-webcomponents
Antes de utilizar IgcFormComponent, debe registrarlo de la siguiente manera:
import {defineComponents, IgcFormComponent, IgcInputComponent, IgcCheckboxComponent, IgcButtonComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
defineComponents(IgcFormComponent, IgcInputComponent, IgcCheckboxComponent, IgcButtonComponent);
Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Introducción.
La forma más sencilla de empezar a utilizar IgcFormComponent 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 IgcFormComponent:
<igc-form novalidate>
<!-- Form content -->
</igc-form>
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. |