Conoce la importancia de los formularios para tu sitio web

1

Versiones de Angular Forms

2

¿Por qué aprender Angular Forms?

3

Presentación del proyecto: tour por los formularios de Platzi Store

4

Novedades de Angular 10: cómo migrar proyectos de Angular 8 o 9 a la versión 10

Primeros pasos con Angular Forms

5

Template Forms vs. Reactive Forms

6

Dominando el FormControl y sus estados

7

Cómo usar inputs de texto y la importancia del type

8

Manejo y binding de selects y selects múltiples

9

Manejo y binding de inputs radio y checkbox

10

Aplica validaciones a un FormControl

11

Integración y validaciones con CSS para mostrar errores

Descubre todas las validaciones de Angular Forms

12

Usando FormGroup para agrupar multiples campos

13

Reactive Forms con FormBuilder

14

Los 11 validadores de Angular (y expresiones regulares)

15

Manejando múltiples FormsGroups

16

Usando componentes de Angular Material

17

Errores comunes de usabilidad en formularios

18

Validaciones personalizadas: mejorando nuestro formulario de registro

Implemeta validaciones avanzadas en PlatziStore

19

Cómo hacer validaciones grupales en Angular Forms

20

Validaciones condicionadas y reactividad a variaciones en la UI

21

Proyecto: formulario para crear categorías de productos

22

Proyecto: conectando nuestro formulario y la API

23

Proyecto: subir imágenes a Firebase Storage

24

Validaciones asincrónicas

25

PatchValue: crear vs. editar

26

Proyecto: creando el método de editar categorías

Construye formularios dinámicos conectando una API

27

Smart vs. dumb components: un patrón para dividir responsabilidades

28

Implementando smart y dumb components en PlatziStore

29

Proyecto: mejorando nuestro formulario de productos

30

Select dinámico: carga opciones desde una API

31

Select dinámico: trabajando con objetos

32

¿Cómo crear campos on demand? Forms dinámicos con FormArray

Estrategias avanzadas y optimización de formularios

33

Crea tu propia librería de componentes con CVA o Control Value Accesor

34

Crea un buscador de gifs usando la API de Giphy

35

Optimiza un input de búsquedas con RxJS y debounce

36

Examina la accesibilidad de tus formularios

37

Siguientes pasos en tu carrera de desarrollo web profesional con Angular

Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Novedades de Angular 10: cómo migrar proyectos de Angular 8 o 9 a la versión 10

4/37
Recursos

Aportes 19

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

El ZIP adjunto a este link contiene el proyecto con Angular 14.
El proyecto me corre normal, sin errores, algunos errores que ocurren (por ejemplo, al agregar un producto) también me ocurrieron con el proyecto original.
Nunca había migrado un proyecto de Angular. A parte de actualizar las librerías, también tuve que modificar la forma de realizar unas importaciones de Firebase.
Vamos a ver si la migración que logré hacer funciona bien a lo largo de todo el curso.

No he podido hacer funcionar el repositorio de este curso, ya he leido e hice lo que los demas aconsejan, pero no funciona, y por lo general las preguntas qu se hacen aca , nunca son respondidas, es parecido a youtube que por lo general no responden y estas solo viendo y repitiendo un video para entender e investigando en la web lo que en platzi nunca te responden, estoy decepcionado con esta plataforma, y tanta fama que tiene, esto me hace acordar de las academias de ingles, que los que sabian ingles era porque lo habian aprendido en otra parte y nunca en la institucion.

Listo ya le migre el proyecto que me quede en PWA.

Después de tanto sufrimiento, logre ejecutar el repositorio. Esta solución corresponde a la fecha Abril 13, 2023

  1. Utilizar Github Desktop para descargar el repositorio.
  2. Seleccionar la rama init en la que trabajaremos.
  3. Abrir repositorio en VSC.
  4. Ejecutar en consola
npm i @angular/compiler-cli@10.0.11
  1. ejecutar ng serve -o y empezar a trabajar, recuerden que cada año que pasa avanzamos en la versión de nodejs, Angular CLI y Angular Core, así que debemos tener mucho ojo al momento de descargar repositorios, es más fácil trabajar con la versión que se utiliza en los videos que vemos, que actualizar todo, muy tedioso… pero sí o sí debemos aprender a migrar nuestros propios proyectos.

Definitivamente van a tener que implementar un nuevo curso, con las versiones actuales. No es tan facil migrarlo porque salen muchos errores. tomare apuntes solamente y practicare a mi manera…
Esto no funciona…

Para quienes quieren correr el proyecto sin necesidad de migrarlo a la ultima versión de Angular cli y node, deben de clonar la rama init del repositorio, luego instalan de forma local la versión de angular que tenga el proyecto y por ultimo usar la versión 14 de node.js, asi serian los pasos:

  1. Descargar el repo en la grama init
  2. Ubicarse en consola dentro del proyecto
  3. Instalar de forma local la version de angular del proyecto:
npm install -D @angular/cli

4)Instalar la herramienta Node Version Manager:

Repositorio de Node Version Manager

5)Instalar node 14 con la herramienta Node Version Manager

nvm install 14

6)Correr el proyecto

ng serve

Lo intente con la rama init para seguir paso a paso el curso, si desean pueden probar con la rama master

Logre migrar el proyecto a la versión 15 de Angular desde la versión 10, versión por versión. Ahora corro el proyecto y salen demasiados errores 😦

para los que tengan problemas de migrar el proyecto de la versión de 10 a 12 y les salga un error como este:The “@angular-devkit/schematics” package cannot be resolved from the workspace root directory.

primero cambiar la version de npm a la 6 con el siguiente comando npm i -g npm@6, después instalar los paquetes npm i, y ahí seguir los pasos del angular update guide.

eje:npx @angular/cli@11 update @angular/core@11 @angular/cli@11

-no es la mejor guía pero espero les sirva.

toca ir actualizando de version en version, actualmente esta en la v15

Bueno se solucionó mirando un poco más el curso y bajar la version de node.

El archivo .nvmrc guarda que versión de node vamos a usar
lo ideal es mirar la version de node que estamos utilizando y con el comando : node -v

Angular saca versión nueva cada 6 meses, que trae mejoras que pueden generar incompatibilidades entre versiones.
Angular v10 algunas novedades como:
-Data range picket: permite generar rangos entre dos fechas.
-Warniung about common JS, alertas si usas ES viejos
-Optional stricter, trabajar con modo estricto, por ejemplo tipar todo.
-Update dependencies: se actualizaron dependencias
-New default browser config, viene por dafault sin soportar ciertos navegadores (internet explorer) que generan peso a la app.

Para actualizar de una versión a otra se puede utilizar el comando:

ng update

Inicié un proyecto hace 2 años con Angular 8, a hoy Feb/22 Angular va en v14, funciona bien, pero quiero incorporar nuevas librerías que requieren una versión superior… Vamos a actualizar!!! … Que dolor de cabeza, algunas librerías antiguas ya no trabajan con lo nuevo de Angular, muchas cosas han cambiado, hasta AngularFirebase mi backend tiene una nueva versión… Dios 🤯 .
Me estoy planteando hacer un refactor completo 😢.
RECOMENDACIÓN: Copiar toda la carpeta del proyecto y trabajar desde ahí.
MORALEJA : Ir actualizando con frecuencia.

cuando comencé a utilizar node versión manager, me facilito la vida en muchos sentidos

Les comparto los pasos que realice para que me funcione el proyecto, capaz exista una manera mas sencilla, pero con estos pasos pude levantar el proyecto:
*Desinstalar la version de angular que utilizaba de los proyectos anteriores, que es la 12.1.2
*Descarga nvm e instalar la version node 16.14.2
*Instalar la ultima version de angular 10
*Eliminar la carpeta node_modules del proyecto
*Ejecutar el comando npm cache clean --force
*Ejecutar npm install
Espero que les sea de ayuda

cososcocos?

Y es por esto que a muchos developers no les gusta trabajar con Angular …

si tengo la version actualizada de angular 13.1 , cual es la version de amgular del proyecto? y como migraria a la nueva version, intente pero me sale falta Tslint