Formularios basados en plantillas en Angular

Name: Formularios basados en plantillas en Angular
Author: Michaela Ochnich

Este capítulo se centrará en la creación de formularios basados en plantillas. Aprenderá a crear la plantilla de formulario y a enlazarla a un modelo de datos…

Preview the first lesson free — get full access to all 6 lessons.

Solicitar una demo Iniciar sesión

Curso: bajo demanda

Esta lección lo guiará a través de la configuración la plantilla para su formulario basado en plantillas. Para esta demostración, Voy a crear un formulario de registro de usuario simple. Primero, generaré un componente para mantener el formulario y luego agregue ese componente a la raíz, y luego en esta plantilla raíz, Eliminaré todo este código de inicio y agregue ese componente de formulario. Ahora, al crear formularios basados en plantillas, necesita importar el FormsModule. Así que lo haré ahora en el módulo de la aplicación raíz. Este FormsModule incluye todos las directivas angulares que necesitarás para la construcción, encuadernación y validando ese formulario basado en plantillas. NgModel y NgForm son dos de las directivas que utilizará que forman parte de este módulo. NgModel es la directiva utilizada para el enlace bidireccional y NgForm manejará el envío de formularios así como proporcionar información de validación. Así que ahora, con eso importado, Puedo empezar a construir la plantilla para el formulario. Así que abriendo esa plantilla de componente de formulario. Este formulario incluirá campos para una primera y apellido y dirección de correo electrónico, una contraseña, un número de teléfono y luego la opción de suscribirse a una lista de correo. Los campos de nombre, correo electrónico y contraseña serán obligatorios. pero luego los otros campos serán opcionales. Entonces, aquí, primero crearé un formulario, y luego aquí, agregaré el campo para el nombre y aquí para los campos de entrada, querrá incluir tanto el ID como los atributos de nombre. El ID se utiliza para hacer coincidir la entrada con la etiqueta. y Angular necesitará el atributo de nombre para las directivas NgModel y NgForm más adelante. Yo tambien voy para diseñar rápidamente esta clase de grupo de formularios con cierto margen para que estos campos no estén bien uno encima del otro y luego de nuevo en la plantilla de componentes, Voy a repetir este código por el resto. de los campos del formulario, y para este campo de correo electrónico aquí, Me aseguré de que el tipo de entrada también sea correo electrónico. para que la validación requerida más adelante funcione correctamente para ese campo, y aquí para el campo de correo electrónico, quieres asegurarte de que el tipo de entrada esté configurado para reflejar que es una dirección de correo electrónico para que la validación funcione correctamente. También haré lo mismo con los dos campos siguientes, la contraseña y el número de teléfono, y luego este formulario también necesitará un botón de envío y luego ver esto en el navegador, todos esos campos se configuran y se muestran aquí. Eso es todo para esta lección sobre cómo configurar la plantilla y en la próxima lección te mostraremos cómo para enlazar esta plantilla usando NgModel.

Intermedio Proveedor : Michaela Ochnich 6 lecciones · 30m en Árabe, Alemán, Inglés, Español, Francés, Portugués, Chinese

Descripción del curso

Este capítulo se centrará en la creación de formularios basados en plantillas. Aprenderá a crear la plantilla de formulario y a enlazarla a un modelo de datos. Aprenderá sobre los estados de control de Angular y cómo usarlos para controlar la validación de formularios y mostrar mensajes de comentarios de errores al usuario. Este capítulo también cubrirá la presentación de formularios.

Lo que aprenderás

Crear un formulario controlado por plantilla para recopilar información del usuario
Construir la plantilla del formulario y vincularla a un modelo de datos
Usar los estados de control de Angular para rastrear el estado del formulario e entrada
Implementar validación de formulario y mostrar mensajes de retroalimentación de error al usuario
Manejar el envío del formulario

Puntos clave

El capítulo se enfoca en construir formularios controlados por plantilla en Angular, incluyendo crear la plantilla del formulario y vincularla a un modelo de datos.
Los estados de control de Angular pueden ser usados para manejar validación de formulario y mostrar mensajes de retroalimentación de error al usuario.
El capítulo cubre envío del formulario como parte del trabajo con formularios controlados por plantilla.
La validación de formulario se aborda en dos lecciones dedicadas (Validación de Formulario Parte 1 y Parte 2).

Preguntas frecuentes

¿Qué cubre este capítulo?

Este capítulo se enfoca en construir formularios controlados por plantilla en Angular, incluyendo crear la plantilla del formulario, vincularla a un modelo de datos, usar estados de control, manejar validación de formulario con mensajes de retroalimentación de error y envío del formulario.

¿Qué aprenderé a hacer con formularios?

Aprenderás cómo crear un formulario para obtener información del usuario y cómo manejar validación y envío del formulario.

¿Cómo se enseña la validación de formularios en Angular en este capítulo?

La validación de formularios se cubre a través de estados de control de Angular, que se utilizan para manejar validación y mostrar mensajes de retroalimentación de error al usuario, y se divide en dos lecciones: Validación de Formulario Parte 1 y Validación de Formulario Parte 2.

¿Qué lecciones se incluyen en este capítulo?

Las lecciones son Construir la Plantilla, Vinculación del Formulario, Estados de Control, Validación de Formulario Parte 1, Validación de Formulario Parte 2 y Envío del Formulario.

¿Qué habilidades se relacionan con este capítulo?

Se relaciona con Angular (marco web), Componentes de Angular, Angular Reactive Forms, Angular UI, Ng Controller y Plantillas.