ANGULAR REACTIVE FORMS

Tutto ciò che devi sapere sui Reactive Forms, uno strumento fantastico per la creazione di form complessi, dinamici e reattivi

INTRODUZIONE

I form rappresentano buona parte delle funzionalità incluse in applicazioni web enterprise e corporate (B2B, banche, fintech, scuole, PA, assicurazioni ma anche in CRM, CMS…) e sono, spesso, la parte più complessa, lunga e noiosa da gestire.
Ma dopo l’uscita di AngularJS, e poi Angular (2+), le cose sono cambiate 😎.

Angular è il framework front-end che integra il maggior numero di funzionalità per la gestione di form, dividendoli in due tipologie: template-driven form , totalmente basati sui template HTML, e i Reactive Forms, basati sul concetto di Observable tramite l’utilizzo della libreria RxJS.
In questo corso intensivo ci focalizzeremo quasi totalmente sui Reactive Forms, in quanto offrono una flessibilità decisamente superiore rispetto ai template-driven forms, ed esploreremo diverse tecniche per sfruttarli al meglio con esempi pratici e casi d’uso reali: dalle fondamenta fino ai casi più complessi.

OBIETTIVO DEL CORSO

Questo corso intensivo si rivolge a tutti gli sviluppatori che già utilizzano Angular o che desiderano esplorare le potenzialità offerte dal framework per quanto concerne la gestione di form. Al termine del corso sarai in grado di utilizzare la maggior parte delle tecniche disponibili in Angular per la creazione e gestione di form di media-alta complessità.

REQUISITI

Per trarre il massimo beneficio da questo corso è necessario, o quanto meno fortemente consigliato, conoscere i concetti fondamentali alla base di Angular o aver partecipato al corso Angular Core Concepts: utilizzo di direttive ngIf, ngFor, ngSwitch; avere basi sul concetto di "service" e dependency injection; comunicazione con il server tramite HttpClient e realizzazione di componenti custom.

Durata: 8 ore

Livello: Avanzato

Versione Angular: 14.x

Versione Typescript: 4.x

Tipologia: in aula o da remoto

TRASCRIZIONE DEL VIDEO

Quale sviluppatore non odia i form?

Soprattutto in ambito enterprise, ma anche in CRM, CMS, applicazioni per PA sono spesso molto complessi e noiosi da realizzare ma grazie ad Angular vi assicurò che diventerà un'attività quasi piacevole.

Angular ci mette a disposizione , infatti, due tipologie di form, i template driven form e i reactive forms. In questo corso, quasi interamente dedicato ai Reactive Forms, analizzeremo, quindi, moltissimi scenari e casi d'uso, e utilizzeremo buona parte delle API del framework tramite sessioni di live coding con decine di esempi pratici e snippet.

Ma dopo questa breve introduzione preferisco descrivervi alcuni degli esempi realizzati durante il corso:

• Partirò dalle basi descrivendo FormControl, FormGroup e FormBuilder

• Utilizzerò gli operatori RxJS per la gestione dello stato del form

• Creeremo Custom Validators, gestiremo gli errori e in questo esempio in particolare sostituisco a runtime un validatore, da codice fiscale a partita iva

• Suddivideremo il form in FormGroup per validare porzioni di form

• Utilizzeremo i FormArray per la gestione di elenchi di form

• Creeremo FormGroup Validators, utili quando la validazione di un controllo dipende dal valore di un altro

• In questo esempio creiamo un color picker che si integra e invalida il form grazie all'implementazione di ControlValueAccessor.

• Gestiremo validatori asincroni tramite REST API

• Avremo modo di mixare validatori sincroni e asincroni

• Suddivideremo un form in diversi componenti separati utilizzando 3 differenti tecniche

• Creeremo form multi-step organizzando il codice in componenti che implementano ControlValueAccessor

• Molto interessante anche la creazione di form a runtime generato tramite il caricamento un file JSON

Moltissimo del codice sviluppato sarà compatibile anche con i template driven forms, di conseguenza riuscirete a riutilizzare buona parte dei custom form component che andremo a realizzare

PROGRAMMA

Introduzione ai Reactive Forms & RXJS

Relazione tra Forms & RXJS

Introduzione sui Reactive Forms

Template driven-forms vs Reactive forms: comparativa tra le tue tipologie di form anche tramite l’ausilio di unit test

Forms e Reactive Programming

AbstractControl e FormControl

Creare reactive form con FormBuilder

Manipolare Forms Group e FormControl con RxJS

Gli operatori RxJS più utili: scenari e casi d’uso reali

Custom FormControl validators: differenti tecniche per la creazione di custom validator per i singoli campi (controls)

Custom FormControl validators con gestione parametri

Mastering Reactive Form

Custom FormGroup validators: creazione di validatori di gruppo in cui la validazione di un campo è legata al contenuto di un altro campo

Custom async form validators: validatori asincroni tramite l’utilizzo di REST API e gestione dello stato di pending

Impostare e cambiare validatori a runtime

FormGroup nidificati: creare e validare gruppi di controlli

Validazioni parziali di un form: validare diversi FormGroup all’interno di un unico form

Creazione form multi step

Organizzare un form in differenti componenti indipendenti utilizzando differenti tecniche

FormArray: validare array di form, rimuovere e aggiungere elementi

Creare form a runtime tramite l’utilizzo di API low-level del framework

Creare componenti custom FormControl con ControlValueAccessor: creare custom form control e integrazione con il sistema di validazione del framework. Alcuni esempi tipici sono Color Picker, Calendar e simili

Generazione di form dinamici a partire da un formato JSON

MODALITÀ LEZIONI

TEORIA

Approfondimento su API, tecniche e funzionalità del framework. Decine di slide, diagrammi e materiale esclusivo incluso nel corso

LIVE CODING

La maggior parte degli argomenti sono esposti tramite sessioni di live coding, affrontando scenari reali e creando codice riutilizzabile

SOURCE CODE

Al termine del corso avrete a disposizione moltisissi esempi e snippet di codice riutilizzabili in applicazioni reali

ESEMPIO LEZIONE

In questo video:

Utilizzo avanzato di Angular Reactive Forms

Creazione custom form "Rate" control

Implementazione di ControlValueAccessor

ISTRUTTORE:
FABIO BIONDI

TRAINER, SPEAKER, DEVELOPER

Mi chiamo Fabio Biondi, sono Microsoft MVP e Google Developer Expert in Angular e Web Technologies, e ho più di 15 anni di esperienza nella creazione di applicazioni web enterprise.

Sviluppatore, Istruttore e Speaker in numerosi eventi. Ho fondato e gestisco diverse community italiane che si occupano di Javascript, Angular, React e Opportunità per gli sviluppatori (più di 30000 membri).

Attualmente mi occupo di formazione e mentoring su Javascript / Typescript, Angular, React, Redux, NGRX, RxJS, Next e, recentemente, Lit e Web Components.
Mi occupo, inoltre, di creazione contenuti tecnici su YouTube (in italiano e in inglese) e sono partner su Twitch in cui mi trovate spesso in streaming (con ospiti, sessioni di formazione, live coding e studio di nuove tecnologie).
CERTIFICATIONI & AWARDS

Dal 2019: Microsoft MVP

Dal 2018: Google Developer Expert in Web Technologies e Angular

2004-2011: Adobe Certified Expert & Instructor (Flex, AIR, Flash).

COSA INCLUDE IL CORSO

Corso di formazione on-site

8 ore

Slides ed Esempi

Accesso Area Studenti

Codice Sorgente

Incluso

Attestato di partecipazione

PDF formato A4

FAQ

A chi è rivolto?

Principalmente a team e società che intendono organizzare corsi di formazione per un ristretto gruppo di partecipanti (da 3 a 30 persone).
Tuttavia, organizzo spesso corsi ed eventi aperti al pubblico in cui chiunque può partecipare (freelance, appassionati, dipendenti). Ti invito a seguirmi sui vari canali social o di iscriverti alla newsletter per rimanere aggiornato sulle iniziative

Non sono sicuro che questo corso sia adatto al mio team. Puoi aiutarmi ad orientarmi?

Assolutamente sì. Utilizza il form di contatto per organizzare una riunione Skype / telefono

Posso modificare il programma e creare un corso personalizzato ?

Sì. Puoi scegliere gli argomenti che preferisci da questo e altri corsi e possiamo stilare insieme un programma personalizzato sulla base dei vostri obiettivi e del background dei partecipanti. Per i corsi più avanzati, solitamente, organizzo una skype call con i partecipanti in modo da valutare il grado di preparazione attraverso un'intervista e/o una sessione di code review (gratuita, della durata di 30/60 minuti)

Dove può essere erogato il corso?

• In Friuli, Ronchi dei Legionari (Gorizia) - Max 14 posti con seduta e tavolo oppure 80 posti solo seduta.
• On-Site, presso la vostra sede, in tutta Italia

Quanto costa?

Richiedi le mie tariffe attraverso il form di contatto specificando indirizzo in cui erogare il corso, il periodo e la durata

C'è un quantitativo minimo di giornate da acquistare?

Almeno 2 giornate se la durata del viaggio (da Trieste, la provincia in cui risiedo) è inferiore alle 4 ore.
Tre giornate, invece, nel caso di una durata superiore.

Il corso prevede esercitazioni per gli studenti?

La scelta è vostra. È possibile effettuare 1 o 2 ore di esercitazioni al giorno oppure lasciare spazio agli argomenti del corso ed approfondimenti

Devo portare il mio laptop?

Lo consiglio ma non è indispensabile. È necessario solo se intendete configurare l'ambiente di lavoro o effettuare esercitazioni. Un blocco appunti e una penna sono più che sufficienti dato che, dopo il corso, avrete comunque accesso al materiale tramite un'area riservata (slide, esercitazioni, source code)