Partiendo de la aplicación como la dejamos la última vez, tenemos tres campos (nombre, apellido, y correo) que son independientes entre sí dentro del formulario. ¿Qué pasaría si quisiéramos agruparlos por temática? Por ejemplo, quizás queramos agrupar el campo nombre y apellido en uno nuevo de nombre completo y seguir dejando el correo a parte, en una estructura similar a ésta:
Para hacer esto, únicamente tenemos que modificar el TypeScript como sigue:
Como se puede ver, no hemos hecho más que agrupar los campos nombre y apellido en uno nuevo nombre completo, dejando a parte el campo del correo.
También es necesario modificar el html como sigue:
Como se puede ver, lo primero que hemos hecho es crear una etiqueta "div" que agrupe a los campos nombre y apellido, y le hemos colocado el atributo "formGroupName="nombreCompleto"".
Una vez hecho esto, hemos modificado, dentro de los campos nombre y apellido, todas las referencias a ellos mismos a través del objeto "formulario" anteponiendo el campo "nombreCompleto".
Hemos hecho esto en el atributo "ngClass" del propio campo (que controlaba las clases css de bootstrap para pintar de colores los campos según sean correctos o no) y en los contenedores que muestran los mensajes de error.
Si levantamos la aplicación podemos comprobar que sigue funcionando igual:
Y eso es todo.
No hay comentarios:
Publicar un comentario