Contattami | Tutti i corsi

ANGULAR REACTIVE FORMS

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

angular-forms



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 (1g)
Livello: Avanzato
Versione Angular: 8.x
Versione Typescript: 3.x
Tipologia: Corso in aula


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
angular-forms-mode1
Approfondimento su API, tecniche e funzionalità del framework. Decine di slide, diagrammi e materiale esclusivo incluso nel corso
LIVE CODING
angular-forms-mode2
La maggior parte degli argomenti sono esposti tramite sessioni di live coding, affrontando scenari reali e creando codice riutilizzabile
SOURCE CODE
angular-forms-mode3
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

profile-round-gde-1



TRAINER, SPEAKER, DEVELOPER
Fabio Biondi, front-end developer da quasi 20 anni, si occupa di formazione, sviluppo e consulenza in ambito enterprise.
Attualmente focalizzato principalmente su Angular, React, Redux, Fabio ha inoltre un solido background nella creazione di interfacce interattive, componenti e infografiche in HTML Canvas e D3.js.

Membro attivo e fondatore di diverse community italiane, collabora attivamente con molte realtà italiane per l'organizzazione di eventi, master, campus e corsi di specializzazione in cui ha formato centinaia di sviluppatori, studenti e team.

Nel 2018 ha ottenuto la qualifica di Google Developer Expert in Web Technologies e Angular e per diversi anni (2004-2011) è stato Adobe Certified Expert & Instructor (Flex, AIR, Flash PRO, Flash Catalyst).

2019-GDE-Angular-Badge
2019-GDE-Web-Technologies-Badge
COSA INCLUDE IL CORSO
Corso di formazione on-site
8 ore (1g)
Slides ed Esempi
Accesso Area Riservata
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 persone (10-30).
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
Non sono sicuro che questo corso sia adatto al mio team. Puoi aiutarmi ad orientarmi?
Assolutamente sì. Utilizza il form di contatto e organizzeremo volentieri una skype call o telefonata di confronto
Posso modificare il programma e creare un corso personalizzato ?
Sì. Puoi scegliere gli argomenti che preferisci da questo e altri corsi e possiamo definire un programma ad hoc tarato sulle vostre necessità e skill. 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 12/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?
Vivendo a Trieste, i viaggi per raggiungere le sedi dei corsi sono spesso lunghi, faticosi e non privi di imprevisti.
Per questo motivo il numero di giornate minimo affinché si possa organizzare un corso è due, nel caso la durata del viaggio sia inferiore alle 3 ore. Tre giornate, invece, nel caso di una durata maggiore
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?
È 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)