{"id":28677,"date":"2024-07-17T09:54:13","date_gmt":"2024-07-17T07:54:13","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=28677"},"modified":"2024-09-03T12:12:31","modified_gmt":"2024-09-03T10:12:31","slug":"angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato\/","title":{"rendered":"Angular Forms: il nuovo evento unico per i cambiamenti di stato"},"content":{"rendered":"\n<p id=\"ae7a\">Il rilascio di <strong>Angular v18<\/strong> ha portato una serie di nuove funzionalit\u00e0 e miglioramenti al framework.<\/p>\n\n\n\n<p>Una di queste funzionalit\u00e0 \u00e8 particolarmente promettente, in quanto introduce una nuova funzionalit\u00e0 all&#8217;interno della libreria <strong>Angular Forms<\/strong>, aggiungendo nella classe <strong>AbstractControl<\/strong> un evento unico per i cambiamenti di stato.<\/p>\n\n\n\n<p>Come di consueto nei miei articoli, prima di approfondire l&#8217;argomento principale, ripassiamo un p\u00f2 le basi. Questo ci aiuter\u00e0 a comprendere meglio i contenuti dell&#8217;articolo.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"c5af\">Angular Reactive Forms: le basi<\/h2>\n\n\n\n<p id=\"fd51\">I <strong>Reactive Forms<\/strong> di <strong>Angular<\/strong> offrono un approccio basato su classi per gestire gli input dei form, fornendo accesso sincrono al modello di dati, potenti strumenti per la validazione degli input e il tracciamento delle modifiche tramite <strong>Observables<\/strong>.<\/p>\n\n\n\n<p>Il modello di dati dei <strong>Reactive Forms<\/strong> \u00e8 composto dalle seguenti classi:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code><strong>FormControl<\/strong><\/code>: rappresenta un singolo input del form, il suo valore \u00e8 una primitiva;<\/li>\n\n\n\n<li><code><strong>FormGroup<\/strong><\/code>: rappresenta un gruppo di <strong>FormControl<\/strong>, il suo valore \u00e8 un oggetto;<\/li>\n\n\n\n<li><code><strong>FormArray<\/strong><\/code>: rappresenta un elenco di <strong>FormControl<\/strong>, il suo valore \u00e8 un array.<\/li>\n<\/ul>\n\n\n\n<p>Un esempio comune di un form pu\u00f2 essere rappresentato da un <strong>FormGroup<\/strong> come questo:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"TypeScript\" data-shcb-language-slug=\"typescript\"><span><code class=\"hljs language-typescript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { FormGroup, FormControl, FormArray } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@angular\/forms'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><mark class='shcb-loc'><span><span class=\"hljs-keyword\">const<\/span> articleForm = <span class=\"hljs-keyword\">new<\/span> FormGroup({\n<\/span><\/mark><mark class='shcb-loc'><span>  title: <span class=\"hljs-keyword\">new<\/span> FormControl(<span class=\"hljs-string\">''<\/span>),\n<\/span><\/mark><mark class='shcb-loc'><span>  content: <span class=\"hljs-keyword\">new<\/span> FormControl(<span class=\"hljs-string\">''<\/span>),\n<\/span><\/mark><mark class='shcb-loc'><span>  tags: <span class=\"hljs-keyword\">new<\/span> FormArray(&#91;])\n<\/span><\/mark><mark class='shcb-loc'><span>});\n<\/span><\/mark><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">TypeScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">typescript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p id=\"04e2\"><strong>Nota:<\/strong> esiste anche la classe <strong>FormRecord<\/strong>, un&#8217;estensione della classe <strong>FormGroup<\/strong>, che permette di creare dinamicamente un gruppo di istanze di <strong>FormControl<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n<p id=\"670e\">Tutte queste classi, d&#8217;ora in poi denominate semplicemente <strong>controlli<\/strong>, derivano dalla classe <strong><code>AbstractControl<\/code><\/strong> e quindi condividono propriet\u00e0 e metodi comuni.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"d80e\">Template binding<\/h3>\n\n\n\n<p id=\"ded7\">L&#8217;approccio basato su classi dei <strong>Reactive Forms<\/strong> \u00e8 supportato da varie direttive fornite dalla stessa libreria, che facilitano l&#8217;integrazione dei controlli con gli elementi HTML.<\/p>\n\n\n\n<p id=\"6b7f\">Prendiamo il seguente <strong><code>FormGroup<\/code><\/strong> come esempio:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"TypeScript\" data-shcb-language-slug=\"typescript\"><span><code class=\"hljs language-typescript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">this<\/span>.articleForm = <span class=\"hljs-keyword\">new<\/span> FormGroup({\n<\/span><\/span><span class='shcb-loc'><span>  author: <span class=\"hljs-keyword\">new<\/span> FormGroup({\n<\/span><\/span><span class='shcb-loc'><span>    name: <span class=\"hljs-keyword\">new<\/span> FormControl(<span class=\"hljs-string\">''<\/span>),\n<\/span><\/span><span class='shcb-loc'><span>  }),\n<\/span><\/span><span class='shcb-loc'><span>  tags: <span class=\"hljs-keyword\">new<\/span> FormArray(&#91; <span class=\"hljs-keyword\">new<\/span> FormControl(<span class=\"hljs-string\">'Angular'<\/span>) ]),\n<\/span><\/span><span class='shcb-loc'><span>});\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">TypeScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">typescript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p id=\"b80a\">Possiamo facilmente collegarlo al template utilizzando le apposite direttive:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-code-table shcb-line-numbers\"><mark class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span> &#91;<span class=\"hljs-attr\">formGroup<\/span>]=<span class=\"hljs-string\">\"articleForm\"<\/span>&gt;<\/span>\n<\/span><\/mark><mark class='shcb-loc'><span>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">formGroupName<\/span>=<span class=\"hljs-string\">\"author\"<\/span>&gt;<\/span>\n<\/span><\/mark><mark class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">formControlName<\/span>=<span class=\"hljs-string\">\"name\"<\/span> \/&gt;<\/span>\n<\/span><\/mark><span class='shcb-loc'><span>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><mark class='shcb-loc'><span>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">formArrayName<\/span>=<span class=\"hljs-string\">\"tags\"<\/span>&gt;<\/span>\n<\/span><\/mark><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> *<span class=\"hljs-attr\">ngFor<\/span>=<span class=\"hljs-string\">\"let tag of tags.controls; index as i\"<\/span>&gt;<\/span>\n<\/span><\/span><mark class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> &#91;<span class=\"hljs-attr\">formControlName<\/span>]=<span class=\"hljs-string\">\"i\"<\/span> \/&gt;<\/span>\n<\/span><\/mark><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p id=\"50f3\">\u00c8 importante notare, senza perderci in una spiegazione esaustiva ma fuori dall&#8217;ambito di questo articolo, che la <strong>FormGroupDirective<\/strong> ci consente di creare facilmente un pulsante per ripristinare il form (<strong>reset<\/strong>) e un pulsante per inviare il suo valore (<strong>submit<\/strong>):<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span> &#91;<span class=\"hljs-attr\">formGroup<\/span>]=<span class=\"hljs-string\">\"articleForm\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-comment\">&lt;!-- form template --&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"reset\"<\/span>&gt;<\/span>Clear<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"submit\"<\/span>&gt;<\/span>Save<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p id=\"643a\">La <strong>FormGroupDirective<\/strong> intercetta gli eventi di click emessi da questi pulsanti per attivare la funzione <code><strong>reset()<\/strong><\/code>&nbsp;del controllo, che riporta il controllo al suo valore iniziale, e l&#8217;evento di output <code><strong>ngSubmit<\/strong><\/code> della direttiva.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4673\">Come restare in ascolto dei cambiamenti<\/h3>\n\n\n\n<p id=\"7e0c\">Per restare in ascolto dei cambiamenti di valore ed eseguire logica di business, possiamo sottoscriverci all&#8217;observable <code><strong>valueChanges<\/strong><\/code> del controllo che desideriamo monitorare:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"TypeScript\" data-shcb-language-slug=\"typescript\"><span><code class=\"hljs language-typescript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>myControl.valueChanges.subscribe(<span class=\"hljs-function\"><span class=\"hljs-params\">value<\/span> =&gt;<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">'New value:'<\/span>, value)\n<\/span><\/span><span class='shcb-loc'><span>});\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">TypeScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">typescript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"9ab5\">Disabilitare un controllo<\/h3>\n\n\n\n<p>Ogni controllo pu\u00f2 essere disabilitato, impedendo agli utenti di modificarne il valore. Questo stato replica il comportamento dell&#8217;attributo HTML <code><strong>disabled<\/strong><\/code>.<\/p>\n\n\n\n<p id=\"89ee\">Per realizzare ci\u00f2, possiamo creare un controllo gi\u00e0 disabilitato oppure utilizzare le funzioni <code><strong>disable()<\/strong><\/code> e <code><strong>enable()<\/strong><\/code> per attivare e disattivare questo stato:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"TypeScript\" data-shcb-language-slug=\"typescript\"><span><code class=\"hljs language-typescript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { FormControl } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@angular\/forms'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><mark class='shcb-loc'><span><span class=\"hljs-keyword\">const<\/span> myControl = <span class=\"hljs-keyword\">new<\/span> FormControl({ value: <span class=\"hljs-string\">''<\/span>, disabled: <span class=\"hljs-literal\">true<\/span> });\n<\/span><\/mark><span class='shcb-loc'><span><span class=\"hljs-built_in\">console<\/span>.log(myControl.disabled, myControl.enabled) <span class=\"hljs-comment\">\/\/ true, false<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><mark class='shcb-loc'><span>myControl.enable();\n<\/span><\/mark><span class='shcb-loc'><span><span class=\"hljs-built_in\">console<\/span>.log(myControl.disabled, myControl.enabled) <span class=\"hljs-comment\">\/\/ false, true<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><mark class='shcb-loc'><span>myControl.disable();\n<\/span><\/mark><span class='shcb-loc'><span><span class=\"hljs-built_in\">console<\/span>.log(myControl.disabled, myControl.enabled) <span class=\"hljs-comment\">\/\/ true, false<\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">TypeScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">typescript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p id=\"a2d3\">Come possiamo notare nell&#8217;esempio in alto, la classe <code><strong>AbstractControl<\/strong><\/code> fornisce due propriet\u00e0 dedicate per descrivere questo stato: <code><strong>disabled<\/strong><\/code> e <code><strong>enabled<\/strong><\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"bdbc\"><strong>Validatori<\/strong><\/h3>\n\n\n\n<p id=\"fc14\">Per imporre regole specifiche ed assicurarci che i tuoi controlli rispettino determinati criteri, possiamo specificare delle regole di validazione, chiamate anche <strong>validatori<\/strong>.<\/p>\n\n\n\n<p>I validatori possono essere <strong>sincroni<\/strong>, come <code><strong>required<\/strong><\/code> o <code><strong>minLength<\/strong><\/code>, oppure <strong>asincroni<\/strong> per gestire la validazione che dipendono da risorse esterne:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"TypeScript\" data-shcb-language-slug=\"typescript\"><span><code class=\"hljs language-typescript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { FormControl, Validators } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@angular\/forms'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { MyCustomAsyncValidators } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/my-custom-async-validators.ts'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">const<\/span> myFormControl = <span class=\"hljs-keyword\">new<\/span> FormControl(<span class=\"hljs-string\">''<\/span>, {\n<\/span><\/span><mark class='shcb-loc'><span>  validators: &#91; Validators.required, Validators.minLength(<span class=\"hljs-number\">3<\/span>) ],\n<\/span><\/mark><mark class='shcb-loc'><span>  asyncValidators: &#91; MyCustomAsyncValidators.validate ]\n<\/span><\/mark><span class='shcb-loc'><span>});\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">TypeScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">typescript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p id=\"72f9\">In base a queste regole, la classe <strong><code><strong>AbstractControl<\/strong><\/code><\/strong> fornisce anche alcune propriet\u00e0 che descrivono lo stato di validit\u00e0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code><strong>valid<\/strong><\/code>: un booleano che indica se il valore del controllo ha superato tutti i test delle regole di validazione;<\/li>\n\n\n\n<li><code><strong>invalid<\/strong><\/code>: un booleano che indica se il valore del controllo non ha superato tutti i test delle regole di validazione. \u00c8 l&#8217;opposto della propriet\u00e0 <strong><code>valid<\/code><\/strong>;<\/li>\n\n\n\n<li><code><strong>pending<\/strong><\/code>: un booleano che indica se il valore del controllo \u00e8 in fase di verifica di validazione.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4973\">FormControlStatus<\/h3>\n\n\n\n<p>Sia lo stato <strong><code>disabled<\/code><\/strong> che gli stati delle validazioni sono interconnessi.<br>Infatti, essi derivano dalla propriet\u00e0 <code><strong>status<\/strong><\/code>, la quale \u00e8 di tipo:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"TypeScript\" data-shcb-language-slug=\"typescript\"><span><code class=\"hljs language-typescript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">type<\/span> FormControlStatus = <span class=\"hljs-string\">'VALID'<\/span> | <span class=\"hljs-string\">'INVALID'<\/span> | <span class=\"hljs-string\">'PENDING'<\/span> | <span class=\"hljs-string\">'DISABLED'<\/span>;\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">TypeScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">typescript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p id=\"a127\"><strong>Nota:<\/strong>&nbsp;le propriet\u00e0 <code><strong>valid<\/strong><\/code><strong>,&nbsp;<\/strong><code><strong>invalid<\/strong><\/code><strong>,&nbsp;<\/strong><code><strong>pending<\/strong><\/code>,&nbsp;<code><strong><em>enabled<\/em><\/strong><\/code>&nbsp;e&nbsp;<code><strong>disabled<\/strong><\/code>&nbsp;sono in realt\u00e0 solo getters derivati dalla propriet\u00e0 <code><strong>status<\/strong><\/code>&nbsp;<em>\ud83e\udd13<\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"0a39\">Pristine e Touched<\/h3>\n\n\n\n<p id=\"3538\">La classe <strong><code>AbstractControl<\/code><\/strong> fornisce anche diverse propriet\u00e0 che descrivono come l&#8217;utente ha interagito con il form:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code><strong>pristine<\/strong><\/code>: un booleano che indica se il controllo \u00e8 intatto, il che significa che <strong>non \u00e8 ancora stato modificato<\/strong>;<\/li>\n\n\n\n<li><code><strong>dirty<\/strong><\/code>: un booleano che indica se il controllo <strong>\u00e8 stato modificato<\/strong>;<\/li>\n\n\n\n<li><code><strong>untouched<\/strong><\/code>: un booleano che indica se il controllo <strong>non \u00e8 ancora stato toccato<\/strong>, il che significa che non \u00e8 stato ancora interagito con esso;<\/li>\n\n\n\n<li><code><strong>touched<\/strong><\/code>: un booleano che indica se il controllo <strong>\u00e8 stato toccato<\/strong>.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<p id=\"9963\">Ora che abbiamo ripassato alcuni dei fondamenti dei <strong>Reactive Forms<\/strong>, \u00e8 finalmente giunto il momento di introdurre l&#8217;argomento principale di questo articolo.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/v2\/resize:fit:900\/1*Gl1WTkaC07SVr_tGhWcLRg.png\" alt=\"angular reactive forms meme\"\/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"3b75\">Il nuovo evento unico per i cambiamenti di stato<\/h2>\n\n\n\n<p>A partire da Angular v18, la classe <code><strong>AbstractControl<\/strong><\/code> espone un nuovo observable <strong><code>events<\/code><\/strong> per tracciare tutti gli eventi di cambiamento dello stato del form.<\/p>\n\n\n\n<p>Grazie a questo, \u00e8 possibile monitorare le classi <code><strong>FormControl<\/strong><\/code>, <strong><code>FormGroup<\/code><\/strong> e <strong><code>FormArray<\/code><\/strong> attraverso i seguenti eventi: <strong><code>PristineEvent<\/code><\/strong>, <strong><code>ValueChangeEvent<\/code><\/strong>, <strong><code>StatusEvent<\/code><\/strong> e <strong><code>TouchedEvent<\/code><\/strong>.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"TypeScript\" data-shcb-language-slug=\"typescript\"><span><code class=\"hljs language-typescript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>myControl.events\n<\/span><\/span><mark class='shcb-loc'><span>  .pipe(filter(<span class=\"hljs-function\">(<span class=\"hljs-params\"><span class=\"hljs-params\">event<\/span><\/span>) =&gt;<\/span> event <span class=\"hljs-keyword\">instanceof<\/span> PristineChangeEvent))\n<\/span><\/mark><span class='shcb-loc'><span>  .subscribe(<span class=\"hljs-function\">(<span class=\"hljs-params\"><span class=\"hljs-params\">event<\/span><\/span>) =&gt;<\/span> <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">'Pristine:'<\/span>, event.pristine));\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>myControl.events\n<\/span><\/span><mark class='shcb-loc'><span>  .pipe(filter(<span class=\"hljs-function\">(<span class=\"hljs-params\"><span class=\"hljs-params\">event<\/span><\/span>) =&gt;<\/span> event <span class=\"hljs-keyword\">instanceof<\/span> ValueChangeEvent))\n<\/span><\/mark><span class='shcb-loc'><span>  .subscribe(<span class=\"hljs-function\">(<span class=\"hljs-params\"><span class=\"hljs-params\">event<\/span><\/span>) =&gt;<\/span> <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">'Value:'<\/span>, event.value));\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>myControl.events\n<\/span><\/span><mark class='shcb-loc'><span>  .pipe(filter(<span class=\"hljs-function\">(<span class=\"hljs-params\"><span class=\"hljs-params\">event<\/span><\/span>) =&gt;<\/span> event <span class=\"hljs-keyword\">instanceof<\/span> StatusChangeEvent))\n<\/span><\/mark><span class='shcb-loc'><span>  .subscribe(<span class=\"hljs-function\">(<span class=\"hljs-params\"><span class=\"hljs-params\">event<\/span><\/span>) =&gt;<\/span> <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">'Status:'<\/span>, event.status));\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>myControl.events\n<\/span><\/span><mark class='shcb-loc'><span>  .pipe(filter(<span class=\"hljs-function\">(<span class=\"hljs-params\"><span class=\"hljs-params\">event<\/span><\/span>) =&gt;<\/span> event <span class=\"hljs-keyword\">instanceof<\/span> TouchedChangeEvent))\n<\/span><\/mark><span class='shcb-loc'><span>  .subscribe(<span class=\"hljs-function\">(<span class=\"hljs-params\"><span class=\"hljs-params\">event<\/span><\/span>) =&gt;<\/span> <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">'Touched:'<\/span>, event.touched));\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">TypeScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">typescript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p id=\"f385\">Queste capacit\u00e0 sono molto potenti, specialmente perch\u00e9, a parte il <code><strong>valueChange<\/strong><\/code>, in passato non era cosi facile ed immediato tracciare i cambiamenti di stato.<\/p>\n\n\n\n<p>In aggiunta a questo, la classe <strong><code>FormGroup<\/code><\/strong> pu\u00f2 anche emettere altri due eventi attraverso l&#8217;observable <strong><code>events<\/code><\/strong>: <strong><code>FormSubmittedEvent<\/code><\/strong> e <strong><code>FormResetEvent<\/code><\/strong>.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"TypeScript\" data-shcb-language-slug=\"typescript\"><span><code class=\"hljs language-typescript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>myControl.events\n<\/span><\/span><mark class='shcb-loc'><span>  .pipe(filter(<span class=\"hljs-function\">(<span class=\"hljs-params\"><span class=\"hljs-params\">event<\/span><\/span>) =&gt;<\/span> event <span class=\"hljs-keyword\">instanceof<\/span> FormSubmittedEvent))\n<\/span><\/mark><span class='shcb-loc'><span>  .subscribe(<span class=\"hljs-function\">(<span class=\"hljs-params\"><span class=\"hljs-params\">event<\/span><\/span>) =&gt;<\/span> <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">'Submit:'<\/span>, event));\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>myControl.events\n<\/span><\/span><mark class='shcb-loc'><span>  .pipe(filter(<span class=\"hljs-function\">(<span class=\"hljs-params\"><span class=\"hljs-params\">event<\/span><\/span>) =&gt;<\/span> event <span class=\"hljs-keyword\">instanceof<\/span> FormResetEvent))\n<\/span><\/mark><span class='shcb-loc'><span>  .subscribe(<span class=\"hljs-function\">(<span class=\"hljs-params\"><span class=\"hljs-params\">event<\/span><\/span>) =&gt;<\/span> <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">'Reset:'<\/span>, event));\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">TypeScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">typescript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p id=\"ae49\">Entrambi gli eventi <code><strong>FormSubmittedEvent<\/strong><\/code> e <strong><code>FormResetEvent<\/code><\/strong> sono ereditati dalla <strong>FormGroupDirective<\/strong> e sono infatti emessi dalla direttiva stessa.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1f4a\">Approfondimenti aggiuntivi<\/h3>\n\n\n\n<p id=\"1d03\">Grazie a questa nuova aggiunta, i seguenti metodi della classe <strong><code>AbstractControl<\/code><\/strong> sono stati aggiornati per supportare il parametro <strong><code>emitEvent<\/code><\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code><strong>markAsPristine()<\/strong><\/code>: imposta il controllo come&nbsp;<code><strong>pristine<\/strong><\/code><strong>;<\/strong><\/li>\n\n\n\n<li><code><strong>markAsDirty()<\/strong><\/code>: imposta il controllo come&nbsp;<code><strong>dirty<\/strong><\/code><strong>;<\/strong><\/li>\n\n\n\n<li><code><strong>markAsTouched()<\/strong><\/code>: imposta il controllo come&nbsp;<code><strong>touched<\/strong><\/code><strong>;<\/strong><\/li>\n\n\n\n<li><code><strong>markAsUntouched()<\/strong><\/code>: imposta il controllo come&nbsp;<code><strong>untouched<\/strong><\/code><strong>;<\/strong><\/li>\n\n\n\n<li><code><strong>markAllAsTouched()<\/strong><\/code>: imposta il controllo e tutti i suoi discendenti come&nbsp;<code><strong>touched<\/strong><\/code><strong>.<\/strong><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"8561\">Grazie per aver letto questo articolo&nbsp;\ud83d\ude4f<\/h2>\n\n\n\n<p>Mi piacerebbe avere qualche feedback quindi grazie in anticipo per qualsiasi commento.&nbsp;<em>\ud83d\udc4f<\/em><\/p>\n\n\n\n<p>Infine, se ti \u00e8 piaciuto davvero tanto,&nbsp;<strong>condividilo<\/strong>&nbsp;con la tua community. \ud83d\udc4b\ud83d\ude01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Il rilascio di Angular v18 ha portato una serie di nuove funzionalit\u00e0 e miglioramenti al framework. Una di queste funzionalit\u00e0 \u00e8 particolarmente promettente, in quanto introduce una nuova funzionalit\u00e0 all&#8217;interno della libreria Angular Forms, aggiungendo nella classe AbstractControl un evento unico per i cambiamenti di stato. Come di consueto nei miei articoli, prima di approfondire&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato\/\">Read more<\/a><\/p>\n","protected":false},"author":200,"featured_media":28713,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[10265],"tags":[11586,12379,10327],"collections":[11708],"class_list":{"0":"post-28677","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend-it","8":"tag-angular-it","9":"tag-angular-forms","10":"tag-javascript-it","11":"collections-dalla-community","12":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Angular Reactive Forms: evento unico per i cambiamenti di stato<\/title>\n<meta name=\"description\" content=\"Angular v18 ha portato una nuova funzionalit\u00e0 all&#039;interno dei Reactive Forms, aggiungendo un nuovo evento unico per i cambiamenti di stato.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Forms: il nuovo evento unico per i cambiamenti di stato\" \/>\n<meta property=\"og:description\" content=\"Angular v18 ha portato una nuova funzionalit\u00e0 all&#039;interno dei Reactive Forms, aggiungendo un nuovo evento unico per i cambiamenti di stato.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-17T07:54:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-03T10:12:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-10.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1800\" \/>\n\t<meta property=\"og:image:height\" content=\"1013\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Davide Passafaro\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Davide Passafaro\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato\\\/\"},\"author\":{\"name\":\"Davide Passafaro\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/79170e2a1bfc41ddeaa10827ce803828\"},\"headline\":\"Angular Forms: il nuovo evento unico per i cambiamenti di stato\",\"datePublished\":\"2024-07-17T07:54:13+00:00\",\"dateModified\":\"2024-09-03T10:12:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato\\\/\"},\"wordCount\":842,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/image-10.png\",\"keywords\":[\"Angular\",\"angular forms\",\"JavaScript\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato\\\/\",\"name\":\"Angular Reactive Forms: evento unico per i cambiamenti di stato\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/image-10.png\",\"datePublished\":\"2024-07-17T07:54:13+00:00\",\"dateModified\":\"2024-09-03T10:12:31+00:00\",\"description\":\"Angular v18 ha portato una nuova funzionalit\u00e0 all'interno dei Reactive Forms, aggiungendo un nuovo evento unico per i cambiamenti di stato.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/image-10.png\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/image-10.png\",\"width\":1800,\"height\":1013,\"caption\":\"angular reactive forms\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Angular Forms: il nuovo evento unico per i cambiamenti di stato\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/codemotionlogo.png\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Codemotion.Italy\\\/\",\"https:\\\/\\\/x.com\\\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/79170e2a1bfc41ddeaa10827ce803828\",\"name\":\"Davide Passafaro\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Immagine-profilo-GDE-430kb-100x100.png\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Immagine-profilo-GDE-430kb-100x100.png\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Immagine-profilo-GDE-430kb-100x100.png\",\"caption\":\"Davide Passafaro\"},\"description\":\"My name is Davide Passafaro and I am Senior Frontend Engineer at Awork. I lead two developer communities in Rome, GDG Roma Citt\u00e0 and Angular Rome, and actively contribute to the tech community as a writer and speaker. When i shut down my computer I like to play board games and archery, not both together till now. I also like escape rooms and memes.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/davide-passafaro\\\/\"],\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/author\\\/davidepassafaro\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Angular Reactive Forms: evento unico per i cambiamenti di stato","description":"Angular v18 ha portato una nuova funzionalit\u00e0 all'interno dei Reactive Forms, aggiungendo un nuovo evento unico per i cambiamenti di stato.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato\/","og_locale":"en_US","og_type":"article","og_title":"Angular Forms: il nuovo evento unico per i cambiamenti di stato","og_description":"Angular v18 ha portato una nuova funzionalit\u00e0 all'interno dei Reactive Forms, aggiungendo un nuovo evento unico per i cambiamenti di stato.","og_url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2024-07-17T07:54:13+00:00","article_modified_time":"2024-09-03T10:12:31+00:00","og_image":[{"width":1800,"height":1013,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-10.png","type":"image\/png"}],"author":"Davide Passafaro","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Davide Passafaro","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato\/"},"author":{"name":"Davide Passafaro","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828"},"headline":"Angular Forms: il nuovo evento unico per i cambiamenti di stato","datePublished":"2024-07-17T07:54:13+00:00","dateModified":"2024-09-03T10:12:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato\/"},"wordCount":842,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-10.png","keywords":["Angular","angular forms","JavaScript"],"articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato\/","url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato\/","name":"Angular Reactive Forms: evento unico per i cambiamenti di stato","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-10.png","datePublished":"2024-07-17T07:54:13+00:00","dateModified":"2024-09-03T10:12:31+00:00","description":"Angular v18 ha portato una nuova funzionalit\u00e0 all'interno dei Reactive Forms, aggiungendo un nuovo evento unico per i cambiamenti di stato.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-10.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-10.png","width":1800,"height":1013,"caption":"angular reactive forms"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-reactive-forms-il-nuovo-evento-unico-per-i-cambiamenti-di-stato\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/"},{"@type":"ListItem","position":3,"name":"Angular Forms: il nuovo evento unico per i cambiamenti di stato"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828","name":"Davide Passafaro","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/05\/Immagine-profilo-GDE-430kb-100x100.png","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/05\/Immagine-profilo-GDE-430kb-100x100.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/05\/Immagine-profilo-GDE-430kb-100x100.png","caption":"Davide Passafaro"},"description":"My name is Davide Passafaro and I am Senior Frontend Engineer at Awork. I lead two developer communities in Rome, GDG Roma Citt\u00e0 and Angular Rome, and actively contribute to the tech community as a writer and speaker. When i shut down my computer I like to play board games and archery, not both together till now. I also like escape rooms and memes.","sameAs":["https:\/\/www.linkedin.com\/in\/davide-passafaro\/"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/davidepassafaro\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-10-600x400.png","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-10-600x600.png","author_info":{"display_name":"Davide Passafaro","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/davidepassafaro\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-10.png",1800,1013,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-10-150x150.png",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-10-300x169.png",300,169,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-10-768x432.png",768,432,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-10-1024x576.png",1024,576,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-10-1536x864.png",1536,864,true],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-10.png",1800,1013,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-10-100x100.png",100,100,true],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-10-180x128.png",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-10-896x504.png",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-10-400x225.png",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-10-600x400.png",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-10-600x600.png",600,600,true]},"uagb_author_info":{"display_name":"Davide Passafaro","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/davidepassafaro\/"},"uagb_comment_info":0,"uagb_excerpt":"Il rilascio di Angular v18 ha portato una serie di nuove funzionalit\u00e0 e miglioramenti al framework. Una di queste funzionalit\u00e0 \u00e8 particolarmente promettente, in quanto introduce una nuova funzionalit\u00e0 all&#8217;interno della libreria Angular Forms, aggiungendo nella classe AbstractControl un evento unico per i cambiamenti di stato. Come di consueto nei miei articoli, prima di approfondire&#8230;&hellip;","lang":"it","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/28677","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/200"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=28677"}],"version-history":[{"count":2,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/28677\/revisions"}],"predecessor-version":[{"id":28715,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/28677\/revisions\/28715"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/28713"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=28677"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=28677"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=28677"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=28677"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}