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

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

PatchValue: crear vs. editar

25/37
Recursos

¿Cómo se edita una categoría utilizando Angular?

La edición de categorías en Angular es un proceso que puede hacerse de manera eficiente utilizando el método patch value. Este método permite incluir toda la información necesaria dentro de un solo formulario, ya sea para editar o crear una categoría. El enfoque de reutilización de código facilita enormemente el proceso, especialmente cuando el formulario requiere los mismos campos para ambas funciones.

¿Cómo se detecta si se está creando o editando una categoría?

El truco para distinguir entre la creación y la edición se basa en el uso del enrutamiento y los parámetros de URL. En el código se manejan dos rutas principales: crear y editar. La edición recibe un identificador (ID) de la categoría a modificar. De esta manera, el código puede determinar si se está creando una nueva categoría o editando una existente con base en la presencia de dicho ID.

import { ActivatedRoute } from '@angular/router';

// Inyectar ActiveRoute para obtener parámetros de la URL
private route: ActivatedRoute

ngOnInit(): void {
  this.route.params.subscribe((params: Params) => {
    this.categoryID = params['id'];
    if (this.categoryID) {
      this.getCategory();
    }
  });
}

¿Cómo se inyectan los valores en el formulario?

Una vez obtenidos los datos de la categoría, se deben inyectar al formulario. Este paso es esencial para mostrar correctamente la información existente en el caso de edición:

  1. Se debe utilizar el método patchValue que permite cargar los datos en el formulario de manera automática.
  2. Alternativamente, se puede establecer cada campo manualmente con setValue.
this.form.patchValue({
  name: data.name,
  description: data.description,
  // Otros campos aquí
});

¿Cómo gestionar la imagen en el formulario?

El manejo de imágenes puede presentar retos adicionales, especialmente cuando se trata de formularios asíncronos, como un upload a Firebase. Afortunadamente, hay formas de solucionarlo:

  1. Vincular el campo de imagen con el formControl adecuadamente para asegurar que el método patchValue distribuya la información correcta.

  2. En ocasiones, es necesario asegurarse de que el campo value no esté vacío o nulo antes de mostrar la imagen.

img.src = this.form.get('imageField').value || '/path/to/default/image';

¿Cómo aseguro una integración fluida?

Para garantizar que tanto la creación como la edición funcionen sin contratiempos:

  • Validar: Comprobar la presencia del ID antes de intentar una petición de datos.
  • Mostrar mensajes de error: Implementar mensajes de alerta o cambios visuales si el procesamiento de datos falla en cualquier etapa.
  • Optimizaciones en el manejo del DOM: Modificar el DOM solo cuando sea necesario, minimizando el uso de procesos asíncronos para elementos no esenciales.

Con estas prácticas, se logra una experiencia de usuario fluida y un desarrollo eficiente. Este enfoque está diseñado para facilitar la escalabilidad y la mantenibilidad del código, maximizando la reutilización y minimizando las complicaciones. Siguiendo estos pasos, puedes abordar con confianza la tarea de edición y creación de categorías en Angular.

Aportes 3

Preguntas 2

Ordenar por:

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

muy buena clase , en lo personal prefiero dar una sola responsabilidad . Reutilizar codigo es excelente siempre pero despues de que te piden cambios y cambios llega un momento donde se convierte un infierno de validaciones , mas con forms mas complejos. con una sola responsabilidad tienes que hacer mas codigo pero tienes mas control… las dos son pros y contras , depende de ti!

Si la data ya existe en la tabla. es mejor pasar todo el objeto cargado desde la misma tabla y no ir a buscar otra vez al servicio.

a mi me confuncio todo