For Control en Formularios Reactivos: Creación y Uso Básico

Clase 6 de 37 • Curso de Angular Forms: Creación y Optimización de Formularios Web

Contenido del curso

Conoce la importancia de los formularios para tu sitio web

Primeros pasos con Angular Forms

Descubre todas las validaciones de Angular Forms

Implemeta validaciones avanzadas en PlatziStore

Construye formularios dinámicos conectando una API

Estrategias avanzadas y optimización de formularios

Tomar examen

Resumen

Para ingresar al sistema pueden ingresar como admin:

User: nicolas@nicolas.com Pass: nicolas.2010

O crear tu propio usuario con /auth/register

Comentarios

Ángel David Roque Ayala

student•

FormControl

Es la pieza atómica de un formulario reactivo

// Crear un form control
nameField = new FormControl('soy un control');

// Enlazar el form cotrol con el template
<input type="text" [formControl]="nameField"/>

// Obtener el valor
{{nameField.value}}

// Obtener un observable del valor
this.nameField.valueChanges

// Obtener el objeto value
<code>
	<pre> {{ nameField | json}} <pre>
</code>

Cristian Flores

student•

Tus explicaciones son muy geniales! enserio! 😀

Nicolas Molina

teacher•

Muchas gracias, espero estes aprendiendo un montón los Angular Forms son poderosos.

Gabriel Arroyo

student•

Buenas noches una consulta cual es el usuario y passord para conectarme como admin. La aplicacion esta conectada a firebase y no se cual es el usuario y clave. Para este caso tendria que generarme mi propio firebase o para hacer las altas de trodos los datos ?

Nicolas Molina

teacher•

Hola!

Para ingresar al sistema pueden ingresar como admin:

User: nicolas@nicolas.com
Pass: nicolas.2010

Nicolas Molina

teacher•

También puedes crear tu propio usuario desde el path: /auth/register

Brayan Alexis Valdes Gallego

student•

¿Si nos subscribimos por valueChanges a un campo como es este caso es necesario destruir esa subscripción o no afectaría o tendría repercusiones?

Gerardo Pérez Pérez

student•

Siempre que realices una suscripción debes de-subscribirte. tienes varias opciones para ello:

Puedes crear un subject y utilizar el pipe takeUntil y en el método OnDestroy darle un next y complete a tu subject.
Puedes usar la libraría: @ngneat/until-destroy
Si la suscripción la realizas desde tu template no necesitas hacer nada, angular maneja de manera automática esas subscripciones

William Moreno

student•

En los formControl no es necesario hacer un unsuscribe ya que cada que se destruye el componente se gestiona automáticamente.

camilo yule

student•

Por si entraste al curso y al correrlo no sabes con que credenciales ingresar a /admin: User: admin@mail.com Pass: admin123

Cristian Flores

student•

Consulta, debiesemos hacer unsubscribe() del valueChanges? De ser así, supongo que la única forma de hacerlo sería en el ngOnDestroy, y eso a su vez no nos permitiría usar el changeDetectionStrategy.OnPush o estoy equivocado?

Nicolas Molina

teacher•

No hay necesidad de hacer un unsubscribe ya que el observable viene del mismo Form que esta en el componente es decir no es ningún Observable que este en otro servicio así que cuando se destruya el componente se destruye la instancia del Form por ende la suscripción.

Luis Márquez

student•

Ufff, tuve que migrar el proyecto desde angular 10 a angular 14 pero asi como dijo nico, de version en version, osea, de la 10 a la 11, 11 a 12 etc.

Noel Adrian Ortiz Sanchez

student•

bro, pudieras compartir el proyecto migrado por favor? luego de migrarlo me da un sin numeros de errores.

Manuel Eduardo Caro Valverde

student•

la baje app actualice y me pide password en login , que le pongo...usuario y pass

Bernarda Albanesi

student•

me paso lo mismo y pude entrar con nicolas@nicolas.com y password nicolas.2010

Elcira Ibarra

student•

O crear tu propio usuario con /auth/register

Daniel AntonioLugo Sumoza

student•

Saludos cordiales en que momento vas a dar el detalle de la instalacion de los programas a usar en este proyecto y la preparacion del entorno..? ya veo que iniciastes a realizar modificaciones y nunca explicates la instalacion.?

Luis Márquez

student•

El proyecto se viene realizando desde cero desde hace varios cursos, solo que veo que para este curso le metio mucha mano al modulo de dashboard.

Yokasta Leis

student•

Siento que me perdí de algo, la estructura del proyecto que habíamos estado siguiendo en los cursos es diferente a esta. 😢

Nelson Luengas

student•

Totalmente de acuerdo, parece que fuera un curso grabado de hace años y no tuviera que ver con el hilo que se estaba llevando

Alexis Duque

student•

También siento lo mismo, pero creo que tratare de adaptarlo al proyecto que teníamos

John Jairo Pico Parra

student•

buena clase, no entendia muy bien lo de la subcripcion, aprendiendo cada dia mas

Oscar

student•

valueChanges

El método valueChanges es una función que se puede usar con formularios reactivos en Angular para monitorear los cambios en los valores de los campos de un formulario. Este método devuelve un Observable que puede ser suscripto para recibir actualizaciones cada vez que el valor de un campo cambia.

import { FormGroup, FormControl } from '@angular/forms';
import { Observable } from 'rxjs';

export class MyForm {
  form = new FormGroup({
    name: new FormControl(''),
    email: new FormControl(''),
  });

  nameChanges: Observable<string>;

  ngOnInit() {
    this.nameChanges = this.form.get('name').valueChanges;
    this.nameChanges.subscribe(name => {
      console.log(`Name changed to: ${name}`);
    });
  }
}

En este ejemplo, se crea una clase FormGroup con dos campos, name y email. Luego, se usa el método valueChanges en el campo name para obtener un Observable que emite valores cada vez que el valor de name cambia. Finalmente, se suscribe a este Observable para recibir actualizaciones y mostrar un mensaje en la consola cada vez que el valor de name cambia.

El método valueChanges es útil para realizar tareas específicas cada vez que el valor de un campo cambia, como actualizar un componente dependiente o realizar una llamada a una API para obtener datos adicionales. Además, el método valueChanges es una forma sencilla de monitorear los cambios en los valores de los campos de un formulario reactivo en Angular.

Juan Diego López Salazar

student•

Como hiciste para migrar el proyecto a la versión mas reciente?

Jully Evangelina Flórez Fonseca

student•

Super Nicolas es un buen profesor

Jorge Morales

student•

El form control es la unidad más básica de un formulario reactivo en Angular. Permite manejar el estado y la validación de un campo específico en el formulario. Cada form control guarda información sobre su valor, estado (tocado, sucio, válido, etc.) y puede tener validadores asociados. En Angular, se utiliza para vincular los elementos del formulario con la lógica de la aplicación, facilitando la interacción del usuario y la reactividad de la interfaz.

yair.garcia

student•

Hola, me sale el siguiente error al correr el proyecto:

10% building 3/4 modules 1 active C:\PROYECTOS\Personal\Angular\platzi-store-forms-1-init\node_modules\webpack-dev-server\client\index.js?htp://0.0.0.0:0/sockjs-node&sockPath=/sockjs-nodenode:internal/crypto/hash:71 this[kHandle] = new _Hash(algorithm, xofLen); ^

Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:71:19) at Object.createHash (node:crypto:133:10) at module.exports (C:\PROYECTOS\Personal\Angular\platzi-store-forms-1-init\node_modules\webpack\lib\util\createHash.js:135:53) at NormalModule._initBuildHash (C:\PROYECTOS\Personal\Angular\platzi-store-forms-1-init\node_modules\webpack\lib\NormalModule.js:417:16) at C:\PROYECTOS\Personal\Angular\platzi-store-forms-1-init\node_modules\webpack\lib\NormalModule.js:452:10 at C:\PROYECTOS\Personal\Angular\platzi-store-forms-1-init\node_modules\webpack\lib\NormalModule.js:323:13 at C:\PROYECTOS\Personal\Angular\platzi-store-forms-1-init\node_modules\loader-runner\lib\LoaderRunner.js:367:11 at C:\PROYECTOS\Personal\Angular\platzi-store-forms-1-init\node_modules\loader-runner\lib\LoaderRunner.js:203:19 at VirtualFileSystemDecorator.readFile (C:\PROYECTOS\Personal\Angular\platzi-store-forms-1-init\node_modules@ngtools\webpack\src\virtual_file_system_decorator.js:47:13) at processResource (C:\PROYECTOS\Personal\Angular\platzi-store-forms-1-init\node_modules\loader-runner\lib\LoaderRunner.js:202:11) at iteratePitchingLoaders (C:\PROYECTOS\Personal\Angular\platzi-store-forms-1-init\node_modules\loader-runner\lib\LoaderRunner.js:158:10) at runLoaders (C:\PROYECTOS\Personal\Angular\platzi-store-forms-1-init\node_modules\loader-runner\lib\LoaderRunner.js:365:2) at NormalModule.doBuild (C:\PROYECTOS\Personal\Angular\platzi-store-forms-1-init\node_modules\webpack\lib\NormalModule.js:295:3) at NormalModule.build (C:\PROYECTOS\Personal\Angular\platzi-store-forms-1-init\node_modules\webpack\lib\NormalModule.js:446:15) at Compilation.buildModule (C:\PROYECTOS\Personal\Angular\platzi-store-forms-1-init\node_modules\webpack\lib\Compilation.js:739:10) at C:\PROYECTOS\Personal\Angular\platzi-store-forms-1-init\node_modules\webpack\lib\Compilation.js:981:14 { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' }

William Enrique Parra Alba

student•

Buenas tardes. Veo que el curso inicia dando por hecho que el servidor está corriendo; les agradezco por favor me indiquen como hago para lanzar el servidor y la aplicación.

Nicolas Molina

teacher•

Hola tienes razón hemos movido esta API conocida como https://store.nicobytes.site/api. Y se ha sido trasladada a https://fakeapi.platzi.com/, la cual cuenta con las mismas características, una mejor documentación y soporte, con esto podrás continuar el curso

John Jairo Pico Parra

student•

buenas noches, una pregunta, si quiero cargar datos de un array al formulario, me explico, tengo un array de 10 items y cada item tiene 4 valores digamos id nombre apellido y ciudad, y quiero que cargar los 10 items en el formulario, por separado pero que se muestre en la misma pantalla y se puedan editar y guardar

Rafael

student•

¿porque necesitas cargar en un formulario los datos de tres clientes? lo que tienes que hacer es crear formbuilder y en los ejemplos le ponen fb, estos lo que hacen es volverse nodos del nodo principal, esa misma idea la aplique al querer que el cliente pueda agregar mas de un tipo de direcciones en la opción nuevo, para el update solo actualizo una dirección a la vez y precargo los datos con pathvalue

Armando Rivera

student•

Por qué si dejo el evento valueChanges y el nameField | json me da error?

Nicolas Molina

teacher•

No debería pasarte pero si me dices que error es el que te sale, te puedo ayudar mejor!

Armando Rivera

student•

Este es el error que me da, noto que sólo me lo manda cuando tengo estos dos códigos, si comento uno u otro no da error

<code>
    <pre>{{ nameField | json }}</pre>
</code>

this.nameField.valueChanges.subscribe(value => {
  console.log(value);
});

Elkin Omar Jiménez García

student•

¿Puedo usar formularios reactivos para objetos (interfaces) como:

usuario = { nombre: 'elkin', edad: 20 } as Usuario;

O solo se puede para campos (ejemplo tipo string, number)?

Nicolas Molina

teacher•

Cada input tiene su propia lógica para ser validado, por ejemplo la edad puede tener una validación única así como el usuario, pero recuerda que al final recibes un objeto.

Juan Pablo Feijoo

student•

Hola Nico espero te encuentres bien, todos tus cursos son excelentes, estoy aprendiendo bastante, mira tengo instalada la versión 19 de angular, pero el @angular/fire está en la versión 18.x. Tal vez me puedes dar alguna sugerenci. Muchas gracias!

// Crear un form control
nameField = new FormControl('soy un control');

// Enlazar el form cotrol con el template
<input type="text" [formControl]="nameField"/>

// Obtener el valor
{{nameField.value}}

// Obtener un observable del valor
this.nameField.valueChanges

// Obtener el objeto value
<code>
	<pre> {{ nameField | json}} <pre>
</code>

import { FormGroup, FormControl } from '@angular/forms';
import { Observable } from 'rxjs';

export class MyForm {
  form = new FormGroup({
    name: new FormControl(''),
    email: new FormControl(''),
  });

  nameChanges: Observable<string>;

  ngOnInit() {
    this.nameChanges = this.form.get('name').valueChanges;
    this.nameChanges.subscribe(name => {
      console.log(`Name changed to: ${name}`);
    });
  }
}

For Control en Formularios Reactivos: Creación y Uso Básico

Conoce la importancia de los formularios para tu sitio web

Formularios en Angular: Creación y Manejo Efectivo

Formularios Reactivos en Angular: Creación y Optimización

Implementación de Formularios Reactivos en Proyectos Angular

Novedades y Migración en Angular 10 para Desarrolladores

Primeros pasos con Angular Forms

Ventajas de los Formularios Reactivos en Angular