Formularios basados en plantillas en Angular

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.