Angular Basics - Formularios (Reactivos y Dirigidos por Plantilla)

Introducción al manejo de formularios en Angular. En el que vemos las dos opciones que tenemos para configurar los formularios en nuestra aplicación. Los Formularios Reactivos y los Dirigidos por Plantilla (Template-Driven). También vemos como añadir las reglas de validación incluidas en el framework a los diferentes controles de los formularios, así como a crear nuestras propias funciones de validación.

Lista de contenido

00:00 Intro
00:09 Elementos comunes

Formularios Reactivos
02:16 Conceptos Básicos (Reactivos).
06:13 Validadores
12:39 Crear Validador Síncrono.
14:39 Crear Validador Asíncrono + updateOn: blur.
18:54 Ejemplo de FormArray.

Formularios Dirigidos Por Plantilla
20:48 Conceptos Básicos (Plantilla).
23:06 Validadores.
24:32 Crear Directiva de Validación.
26:48 Vinculo Bidireccional (Two-way Binding).
28:07 Outro

Enlaces de interés

Si deseas apoyar la creación de más contenido de este tipo, puedes hacerlo a través de:

---

[michaelcastillo]

Muchas gracias por los videos Akotech, son realmente excelentes, les comento que estoy siguiendo todos estos pasos y me encontré con un problema en el minuto 6:12, en el cual se asigna las credenciales al método LogIn de Auth, cuando hago la asignación me genera el error: "Argument of type 'Partial<{ email: string | null; password: " y para continuar con el video tuve que asignar manualmente a una variable del tipo loginCredentials, con eso funciona, pero no estoy seguro que sea la forma más adecuada, debido a que hago una asignación manual, mi consulta es como se debería realizarlo??. Por si acaso estoy trabajando con angular 14, mi código es:
signIn(): void {
const loginCredentials: LoginCredentials = {
email: this.loginForm.value['email']!,
password: this.loginForm.value['password']!,
}

[eslackware]

¡Felicidades a Akotech por tu increíble trabajo en tu canal de YouTube! Tu forma didáctica de enseñar programación es realmente impresionante. Tus videos son una gran fuente de conocimiento y aprendizaje para todos los que te seguimos. Tu dedicación y pasión por enseñar y compartir tus conocimientos son evidentes en cada uno de tus videos. ¡Eres un verdadero profesional y una gran inspiración para aquellos que quieren aprender y mejorar en la programación! ¡Seguiremos aprendiendo de ti y esperamos ver más de tu increíble trabajo en el futuro!

[ferlezcano]

akotech, no encuentro un solo video que no tenga buenísimas palabras para el canal.

Como siempre, excelente video y muy muy bien explicado 💪

[theyagerprogramming]

Que belleza de vídeo.... Muchas gracias!!!

[daguttt]

3 meses depués, vuelvo a ver el video detenidamente. La verdad es que siempre que entro a cualquiera de tus videos así ya los haya visto, son geniales. 😁

En fin. Me gustaría recordarte algo que dices en el min 25:56. Ya sabrás que es. Estamos al pendiente de ese video 👀👀.

[juanarango]

Excelente video !! supremamente claro !!! esta lista de reproducción esta super bien elaborada. Enhorabuena !!

[advancexz]

ok, lo puse en pausa para comentar que estos videos son de lo mejor que me he encontrado! super bien explicados, felicidades!!

[YosipmikeColin]

Exelente video amigo, me gusta la calidad del video y su forma de explicar, sigue asi ....

[CanalRubi]

Que potencia de los formularios en Angular, calidad!! Muchas gracias!!

[mauriciomontes]

tienes cursos de pago o algo así?? la verdad es que están muy buenos... muchas gracias

[betweencode]

Igual hago vídeos, y me quede pasmado de lo genial que tienes en presentaciones!!.. espero que sigas creciendo y saludos by betweencoderos :) ...

[oscarperez-kpqd]

Excelente video como todos los de esta lista.
Podrías por favor enseñarnos los componentes que creas para reurilizarlos y mostrar los mensaje de error?(minutos 11:10 aproximadamente)

[Chris_]

No puedo creer que semejante pedazo de canal tenga tan poquitos subs! Lo que se estan perdiendo

[daguttt]

Llevo alrededor de 6 meses aprendiendo Angular y de lo que he visto de manejo de formularios en este framework... este video honestamente ha sido el mejor que he visto 🔥🤯. Durante el video tuve varios momentos tipo: "Aaaaah ya entiendo 🤔, tiene sentido". @akotech Keep up the Excellent job!

[gerardocardenas]

Buen video, muchas gracias y Dios le bendiga, ahora tengo una duda, cuando en un tabla por ejemplo p-table de primeng, solo quiero crear formControl en dos campos, ahora cada si le pongo como nombre al formControlName el id de esa fila, me puede servir como referencia para despues obtener el dato de esa casilla en especifico?

[mauriciosoto]

excelente video y excelente explicación .... tengo una consulta por que en el minuto 13:57 cuando creas la función passwordsMustBeEqual y asignas la variable

const newPassword = group.get('newPassword') as Formcontrol: <--- especificamente para que sirve el "as formControl"

Saludos

[renzoortegatorres]

Hola Akotech, excelente tu video, tengo un problema espero te haya pasado, para actualizar un registro al momento de dar clik en el boton editar me carga los datos en los controles del sistema que estoy desarrollando(Estoy trabajando con Firmulario Reactivo). Cuando por ejemplo modifico un dato en un combo, por ejemplo cargó Tipo Producto Jardinería y lo cambio para actualizarlo por el Tipo de Producto Terraza, se borran los campos del FormGroup y solo envia el dato que he modificado y los que se cargan por defecto en el FormGroup y el resto los envío null, pero si no cambio ningun dato y lo guardo, sí me guarda. Es como si al momento de seleccionar otro dato de los combos o cambiar la fecha se volveria a cargar el FormGroup. Si tienes alguna solución sería genial.

[carlospuyana]

Muy buen video amigo, tendría una duda. Como sería posible hacer, teniendo varios enlaces, cuando pulses en uno te muestre un formulario, y cuando pulses en otro enlace, el formulario anterior se cambia por otro formulario (dentro de la misma pagina). Gracias de antemano!