Angular Form: tutorial e guida completa

I form in Angular vengono utilizzati per raccogliere i dati dall’utente. In questa serie di guide sui form Angular, esamineremo cosa sono i form in Angular e nei tutorial successivi vedremo come utilizzare i form Angular con esempi pratici. Questa guida fa parte di Angular: la guida definitiva.

Guida ai Form in Angular

I form di immissione dati possono essere molto semplici o molto complessi. Possono contenere un numero elevato di campi di input, anche su più schede. I form possono anche contenere complesse logiche di validazione interdipendenti su più campi.

Cosa fa Angular:

• Inizializza i campi dei form e li presenta all’utente
• Cattura i dati dall’utente
• Tiene traccia delle modifiche apportate ai campi
• Effettua la validazione dei campi
• Mostra eventuali errori all’utente

Link a tutte le guide relative ai Form in Angular

• Angular Form: tutorial e guida completa (questa guida)
• Template Driven Form in Angular: guida pratica
• Angular: come impostare valori nei Template Driven Form
• Reactive Form in Angular: guida pratica
• Angular: FormBuilder e ReactiveForm
• Angular Form: SetValue & PatchValue
• Angular Form: l’evento StatusChanges
• Angular Form: l’evento ValueChanges
• Angular: l’oggetto FormControl
• Angular: la classe FormGroup
• Angular: esempi sui FormArray
• Angular: come creare form dinamici o nidificati utilizzando FormArray
• Angular: come gestire le validazioni nei ReactiveForm
• Validatori personalizzati nei ReactiveForm di Angular
• Come passare parametri ad un validatore personalizzato in Angular
• Come iniettare un servizio in un validatore personalizzato in ANgular
• Come gestire le validazioni nel Template Driven Form in Angular
• Validatori personalizzati nei Template Driven Form

Angular Forms Module

Il modulo dedicato alle form in Angular. Fornisce tutti i servizi sopra elencati. Associa il campo del form alla classe del componente Angular e tiene traccia delle modifiche apportate ai campi del form in modo che possiamo rispondere di conseguenza. Le form in Angolari forniscono validatori integrati per convalidare gli input. Puoi creare anche un tuo validatore personalizzato. Presenta gli errori di convalida all’utente. Infine, incapsula tutti i campi di input in una struttura di oggetti quando l’utente invia il form.

Angular utilizza due approcci per costruire le form. Uno è l’approccio Template Driven e l’altro è l’approccio Reactive o Model-driven Form.

L’approccio Template-driven

L’approccio Template-driven è il modo più semplice per costruire le form in Angular. La logica del form viene inserita nel template. Detto approccio è simile a quello adottato in AngularJs.

L’approccio Model-driven Form

Nelle Reactive Forms o Model-driven Form, la logica del form è definita nel componente come un oggetto. L’approccio Model-driven Form ha molti vantaggi in quanto semplifica il test del componente.
In questo approccio, la rappresentazione del form viene creata nella classe componente e quindi associato agli elementi HTML usando speciali markup.

I Model-driven Form in Angular ci consentono di creare facilmente form dall’aspetto sofisticato senza scrivere alcun codice javascript. I Model-driven Form vengono creati nella classe componente, dove i campi del form vengono creati come proprietà della nostra classe. Questo semplifica notevolmente i test.

Ecco l’elenco dei tutorial su come creare un form utilizzando l’approccio basato sui Forms Module e l’approccio Template-driven.

FormControl, FormGroup e FormArray

Il modulo Angular dedicato alle form è composto da tre elementi fondamentali, indipendentemente la fatto che si tratti di un form Template-driven o Model-driven.

FormControl

Un FormControl rappresenta un singolo campo di input in un form Angular.
Prendiamo in considerazione un semplice campo di testo

Nome : <input type="text" name="nome" />

Come sviluppatore, vorresti conoscere il valore corrente del campo. Ti piacerebbe anche sapere se il valore è valido o meno. Se l’utente ha modificato il valore o se è invariato. Vorresti anche essere avvisato quando l’utente cambia valore.

FormControl è un oggetto che incapsula tutte queste informazioni per ogni singolo elemento di input. Tiene traccia del valore e dello stato di convalida di ciascuno di questi controlli.

FormControl è solo una classe. Viene creato un FormControl per ciascun campo del form. Possiamo fare riferimento nella nostra classe di componenti e controllarne le proprietà e i metodi.

È possibile utilizzare FormControl per impostare il valore del campo del form, avere lo stato del campo del form come (valid/invalid, pristine/dirty, touched/untouched ) ecc. E aggiungere regole di convalida.

Vediamo come utilizzare un FormControl

let nome = new FormControl(); // creo un FormControl

Quindi, è possibile recuperare il valore corrente nel campo utilizzando la proprietà value

nome.value   // restituisce il valore del campo nome

È possibile verificare lo stato di convalida del campo Nome:

nome.errors      // restituisce una lista di errori
nome.dirty       // restituisce true se il valore è cambiato (dirty)
nome.touched     // restituisce true se il campo è stato toccato
nome.valid       // restituisce true se il valore ha passato tutte le validazioni

FormGroup

FormGroup è una raccolta di FormControl. Ogni FormControl è una proprietà in un FormGroup, con il nome del controllo come chiave.
Spesso le form hanno più di un campo. È utile disporre di un modo semplice per gestire insieme i controlli del form.

Considera il seguente form. Tre campi di input via, città e cap.

via : <input type="text" name="via" >
città : <input type="text" name="citta" >
cap : <input type="text" name="cap" >

Tutti i campi sopra indicati sono rappresentati da FormControl separati. Se volessimo verificare la validità del nostro form, volessimo verificare la validità di ogni singolo FormControl per verificarne la validità. Immagina un form con un elevato numero di campi di input. Potrebbe risultare molto difficile controllare un numero elevato di FormControl e verificarne la validità.

FormGroup risolve questo problema fornendo un’interfaccia wrapper attorno a una raccolta di FormControls. Un FormGroup tiene traccia dello stato di ciascun FormControl figlio e aggrega i valori in un oggetto. Con ciascun nome di ciascun controllo come chiave.

Possiamo raggruppare questi campi di input sotto l’indirizzo del gruppo:

let indirizzo= new FormGroup({
    via : new FormControl(""),
    citta : new FormControl(""),
    cap : new FormControl("")
})

Nell’esempio sopra, l’indirizzo è il nostro FormGroup, composto da 3 Controlli: via, citta e cap. Possiamo quindi verificare insieme la validità dell’intero gruppo. Ad esempio, se il cap non risulta valido, indirizzo restituisce il cap non valido. È possibile leggere il valore di indirizzo utilizzando il metodo value, che restituisce un oggetto JSON.

indirizzo.value

Il quale ritorna

indirizzo {
    via :"",
    citta:"",
    cap:""
}

Puoi accedre ai singoli controlli

indirizzo.get("via")

Puoi controllare gli stati di validazione

indirizzo.errors     // restituisce una lista di errori
indirizzo.dirty      // restituisce true se il valore è cambiato (dirty)
indirizzo.touched    // restituisce true se il campo è stato toccato
indirizzo.valid      // restituisce true se il valore ha passato tutte le validazioni

Un form Angular può avere più di un FormGroup. Un FormGroup può contenere anche un altro FormGroup.

FormArray

FormArray è un array di FormControl. È simile a FormGroup ad eccezione di una differenza. In FormGroup ogni FormControl è una proprietà con il nome del controllo come chiave. FormArray è un array di FormControl.

Definiamo un FromArray

contattaci = new FormGroup( {
    nome: new FormControl(''),
    citta:new FormArray([
      new FormControl('Roma'),
      new FormControl('Napoli')
    ])
  });

È possibile ottenere le città dal metodo contattaci con .get

citta() :FormArray {
    return this.contattaci.get("citta") as FormArray
  }

La validazione

citta.errors      // restituisce una lista di errori
citta.dirty       // restituisce true se il valore è cambiato (dirty)
citta.touched     // restituisce true se il campo è stato toccato
citta.valid       // restituisce true se il valore ha passato tutte le validazioni

Conclusione

In questo tutorial, abbiamo compreso cosa sono e come utilizzare al meglio gli Angular Form. Abbiamo esaminato i componenti di base, ovvero FormGroup, FormControl e FormArray. Angular ci permette di costruire moduli usando due approcci diversi.