Los formularios son esenciales para la recopilación de datos. Independientemente de la aplicación que crees, tendrás que crear un formulario que sirva para diferentes propósitos en algún momento. Con el Creador de formularios de App Builder, puede agilizar la creación de formularios Angular a través de una interfaz intuitiva de arrastrar y soltar y varias funciones adicionales potentes, lo que garantiza que la creación de formularios sea más rápida y eficiente.
Pero hablaremos de esto más adelante. Ahora, echemos un vistazo a Forms y exploremos cómo App Builder integra Angular Form Builder para simplificar la creación de formularios.
Tradicionalmente, la creación de formularios en Angular requiere escribir código repetitivo para definir controles, grupos y validaciones. Sin embargo, el uso de Angular Form Builder reduce este esfuerzo manual y elimina los errores. Por lo tanto, un Creador de formularios en Angular es una herramienta o una funcionalidad separada que proporciona una forma más estructurada para la creación más sencilla y automatizada de formularios mientras administra las configuraciones de diseño, controles de formularios, validaciones, grupos y más mencionados anteriormente.
Nuestra herramienta de low-code, App Builder ™, introdujo recientemente una nueva función que proporciona todas estas capacidades. Trabajando como un Angular arrastrar y soltar, Form Builder hace que el diseño de formularios HTML sea rápido y más eficiente, con capacidades críticas como la generación automática de estructuras de formularios directamente desde los puntos finales de la API, que llevan la integración del backend a otro nivel y simplifican el proceso significativamente.
También hay una amplia flexibilidad en los diseños de formularios y una profunda personalización con opciones para mostrar notificaciones de envíos, errores y validaciones del lado del servidor.
Aspectos principales de Form Builder:
- Cree formularios automáticamente arrastrando y soltando un punto de conexión desde su fuente de datos
- Modificación de componentes en el formulario con diferentes equivalentes para enriquecer el formulario
- Crear un formulario desde cero
- Probar las capacidades CRUD de los formularios creados
- Generar una aplicación Angular e insertarla en GitHub con código listo para producción y flexibilidad de código completa
En Angular aplicaciones, FormControl, FormGroup, FormArray y ControlValueAccessor representan los componentes más fundamentales de los formularios reactivos. Echemos un vistazo a cada uno y tratemos de comprender sus roles y funcionalidades.
Control de forma
En esencia, FormControl es una clase en Angular que se utiliza para realizar un seguimiento del valor y el estado de validación de un campo de formulario individual. También admite validaciones sincrónicas y asincrónicas. Estos son algunos puntos clave sobre FormControl:
- Seguimiento de valor: Realiza un seguimiento del valor actual del campo de formulario.
- Administración de estado: realiza un seguimiento del estado (válido, no válido, tocado, intacto) del campo de formulario.
- Validación: admite validaciones sincrónicas y asincrónicas.
- Eventos: Proporciona acceso a las interacciones del usuario y a los eventos relacionados con el campo del formulario.
Dado que los formularios reactivos se basan en una clase de componente, Angular validación de formularios reactivos se produce agregando funciones de validador directamente al modelo de control de formulario en la clase de componente.
Cuando el valor es válido, los validadores devuelven null. Si el valor no es válido, los validadores generan un conjunto de errores y puede mostrar un mensaje de error específico en la pantalla.
La demostración a continuación muestra un formulario de reserva de películas típico que utiliza Angular validación de formulario reactivo, donde los campos obligatorios (película, nombre completo, correo electrónico y género) deben completarse antes del envío. Las entradas incompletas se resaltan en rojo con mensajes de error específicos, mientras que los campos válidos se vuelven verdes. El botón "Reservar" permanece desactivado hasta que todos los campos se completen correctamente, lo que se activa, lo que permite el envío exitoso del formulario.
Grupo de formularios
Un FormGroup en Angular es un contenedor que agrega varias instancias de FormControl. Realiza un seguimiento de los valores y los estados de validación de sus controles de formulario secundarios, serializándolos en un objeto utilizando sus respectivos nombres como claves.
FormArray es especialmente útil para formularios que requieren un número variable de controles similares, como agregar varias direcciones de correo electrónico o números de teléfono.
Ejemplo de código de un formulario en el que los usuarios pueden introducir varias entradas, como direcciones de correo electrónico:
import { Component } from '@angular/core'; importar { FormGroup, FormArray, FormControl, Validators } desde '@angular/forms'; @Component({ selector: 'app-email-form', template: \' <form [formGroup]="form"> <div formArrayName="emails"> <div *ngFor="let email of emailArray.controls; let i = index"> <label for="email-{{ i }}">Email {{ i + 1 }}</label> <input id="email-{{ i }}" type="email" [formControlName]="i" placeholder="Enter email" /> <button type="button" (click)=& cuota; removeEmail(i)">Eliminar</button> </div> </div> <button type="button" (click)="addEmail()">Agregar correo electrónico</button> <button type="submit" [disabled]="form.invalid">Submit</button> </form> <p>Valor del formulario: {{ form.value | json }}</p> \', }) export class EmailFormComponent { form = new FormGroup({ emails: new FormArray([new FormControl('', Validators.email)]), }); get emailArray(): FormArray { return this.form.get('emails') as FormArray; } addEmail() { this.emailArray.push(new FormControl('', Validators.email)); } removeEmail(index: number) { this.emailArray.removeAt(index); } }
Las características clave incluyen:
- Agrupación: combina varias instancias de FormControl en un único objeto.
- Agregación de valores: realiza un seguimiento de los valores de cada control secundario y los combina en un objeto.
- Administración de validación: administra el estado de validación de todos sus controles secundarios.
A continuación, se muestra un ejemplo de código:
const profileForm = new FormGroup({ firstName: new FormControl('', Validators.required), lastName: new FormControl(''), email: new FormControl('', [Validators.required, Validators.email]), });
En este fragmento de código, si algún control secundario no es válido, se considera que todo el grupo no es válido.
FormGroup actúa como contenedor para uno o varios controles de formulario. Agrupa campos relacionados y le permite administrar colectivamente sus valores y validación. Se inicializa con:
- Valor predeterminado: Una cadena vacía (").
- Validators.required: Garantiza que el campo del componente no quede vacío.
Lo que hace FormGroup en el ejemplo anterior:
- Realiza un seguimiento del valor del campo: mantiene el valor actual de datePicker accesible y actualizable.
- Gestiona la validación: garantiza que el campo sea válido antes de enviar el formulario.
- Encapsula lógica: combina varios controles en una unidad lógica, lo que simplifica la administración de formularios.
FormArray
FormArray es similar a FormGroup, pero en lugar de usar nombres como claves, organiza los controles como una matriz indizada. Esto lo hace ideal para escenarios en los que el número de controles es dinámico, como agregar varios elementos a una lista. Las características clave incluyen:
- Formularios dinámicos: recopila formularios creados dinámicamente en una matriz estructurada.
- Indexación: acceda a formularios individuales utilizando su índice en la matriz.
- Agregación de estado: Calcula el estado de la matriz reduciendo los valores de estado de sus elementos secundarios. Si un control no es válido, toda la matriz se considera no válida.
ControlValueAccessor en Angular
ControlValueAccessor es una interfaz que permite que los formularios Angular interactúen con controles de formulario personalizados, lo que garantiza que se comporten como elementos de formulario estándar. Al crear componentes personalizados que funcionan como controles de formulario (por ejemplo, un selector de fecha personalizado), la implementación de ControlValueAccessor permite una integración perfecta con los formularios reactivos de Angular.
Este es un ejemplo de ControlValueAccessor:
@Component({ selector: 'custom-input', providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CustomInputComponent), multi: true } ] }) export class CustomInputComponent implementa ControlValueAccessor { // Implementación aquí }
Esta configuración garantiza que el componente de entrada personalizado se pueda utilizar dentro de Angular formularios como cualquier elemento de formulario nativo. Lo que obtienes es:
- Integración perfecta: Permite que los componentes personalizados funcionen con formularios Angular.
- Reutilización: Permite la creación de componentes de formulario reutilizables.
- Consistencia: Garantiza que los controles personalizados se adhieran a las API de formularios de Angular.
La velocidad y la eficiencia son esenciales a la hora de crear aplicaciones hoy en día. Por lo tanto, incluso cuando se trata de crear formularios, los equipos buscan la mejor manera de optimizar los resultados e impulsar sus esfuerzos. Reunir Angular Form Builder con low code se convierte en un movimiento estratégico que asegura varias ventajas.
Creación rápida de formularios
La creación manual de formularios y la escritura de código lleva mucho más tiempo que la generación de código. Con la experiencia de creación de formularios de arrastrar y soltar de App Builder, tiene las herramientas y capacidades para crear formularios más rápido sin una codificación extensa. Puede generar fácilmente formularios completos directamente desde los puntos finales de la API, lo que ahorra mucho tiempo y esfuerzo.
Personalización completa
Además de la velocidad, puede buscar flexibilidad y personalización. El Angular Form Builder en App Builder le permite adaptar el estilo, los componentes y los diseños de formulario para que coincidan con la marca y cualquier requisito. Hay configuraciones intuitivas para ayudarlo a agregar validaciones, mensajes de error y otras mejoras personalizadas.
Colaboración mejorada
La creación de formularios suele involucrar también a diseñadores que marcan la experiencia. Esto a menudo conduce a plazos prolongados para la creación de formularios, ya que los equipos intercambian entregas y archivos de diseño para su aprobación y desarrollo. Sin embargo, App Builder y la funcionalidad de Angular Form Builder mejoran esta colaboración, ya que no tendrá que probar y depurar estructuras de formularios cada vez. La interfaz intuitiva garantiza procesos de diseño simplificados con formularios que se pueden generar fácilmente de inmediato. No se requieren grandes conocimientos técnicos.
Escalabilidad
Su aplicación puede crecer, y esto requiere escalabilidad. Los formularios creados con la última funcionalidad de Form Builder de App Builder son escalables y siguen siendo de alto rendimiento en todos los niveles de uso. Y como no hay dependencia de un proveedor, usted y su equipo no renuncian a la funcionalidad de sus aplicaciones.
Para esta guía práctica, demostraremos dos formas: automática y manual. Comenzaremos con un diseño existente en paralelo que muestra muy claramente los escenarios de Master Detail en App Builder. Tendremos una lista de clientes y actualizaremos a estos clientes con el formulario.
Creación automática de formularios
Paso 1: Arrastre de puntos de conexión de datos
Para empezar, arrastre un extremo de datos a la superficie de diseño. Se generará automáticamente un conjunto de componentes de formulario en función de las propiedades del punto final.
- Los métodos POST y PUT crean campos de entrada para el envío de datos.
- El control básico de eventos, como las interacciones OnSuccess y OnError, se configura automáticamente.
Paso 2: Creación y mapeo de controles automáticos de formularios
Los controles de formulario se crean en función del tipo de datos y los metadatos de cada campo, lo que garantiza entradas y etiquetas intuitivas (por ejemplo, los campos de fecha usan selectores de fecha, los campos booleanos usan interruptores). Los desarrolladores conservan el control total para modificar componentes, agregar validaciones o ajustar etiquetas directamente en el panel de propiedades.
Paso 3: Editar el formulario
Una vez generado, el formulario se puede modificar para incluir o excluir campos, personalizar etiquetas y establecer validaciones de entrada, lo que ofrece una experiencia de diseño intuitiva. App Builder permite a los desarrolladores adaptar tanto el diseño del formulario como los componentes:
- Agregue o elimine fácilmente elementos dentro del formulario.
- Ajuste las propiedades de control, como las validaciones obligatorias y deshabilitadas, la personalización de etiquetas y la asignación.
- Configurar botones de acción.
Creación manual de formularios
También puede crear formularios manualmente en App Builder. La ventaja de este enfoque es que garantiza un control completo sobre la estructura y el diseño sin necesidad de enlaces inmediatos a las fuentes de datos.
Paso 1: Arrastrar y soltar elementos
Esto sucede arrastrando y soltando elementos como campos de entrada, botones y componentes de formulario en el contenedor del formulario para diseñar el formulario.
Paso 2: Enlace de origen de datos
Una vez diseñado el formulario, los desarrolladores pueden enlazarlo a un punto de conexión desde orígenes de datos configurados. Esta flexibilidad garantiza la capacidad de refinar los elementos del formulario antes de definir las interacciones de datos.
Paso 3: Comportamiento de enlace y validaciones
Si cambia entre puntos de conexión una vez creado el formulario, las entradas no coincidentes mostrarán una advertencia de enlace no válido y esos enlaces no se generarán como enlaces rotos en la salida del código. También puede inicializar una nueva variable desde el cuadro de diálogo de enlace de punto de conexión de formulario con el punto de conexión de datos de API, lo que le proporciona el contexto necesario para la inicialización del formulario.
Los enlaces no válidos se excluyen del código generado, lo que garantiza que la aplicación se compile sin errores. Para minimizar las interrupciones al cambiar de punto de conexión, App Builder proporciona advertencias sobre posibles invalidaciones.
Conclusión
Independientemente del enfoque que elija, al final, puede utilizar el modo de vista previa de App Builder para interactuar con el formulario y ver las validaciones de entrada en tiempo real o los envíos de formularios, con notificaciones que indican errores de éxito o validación.
