{"id":2172,"date":"2021-07-06T04:21:00","date_gmt":"2021-07-06T02:21:00","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/uncategorized\/reactive-forms-in-angular\/"},"modified":"2022-11-08T15:52:18","modified_gmt":"2022-11-08T14:52:18","slug":"reactive-forms-in-angular","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/reactive-forms-in-angular\/","title":{"rendered":"Reactive Forms in Angular"},"content":{"rendered":"\n<p>Any subject about front-end development is bound to become popular these days as the ever-evolving <span id=\"urn:enhancement-c6f34c88\" class=\"textannotation disambiguated wl-creative-work\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/javascript\"><a href=\"https:\/\/www.codemotion.com\/magazine\/dev-hub\/javascript\/javascript-ultimate-guide\/\" class=\"ek-link\">JavaScript<\/a><\/span> language still gets most of the attention from web designers.<\/p>\n\n\n\n<p>If you&#8217;ve been in the field for some time, you know too well that new frameworks are born almost every day, for all kinds of purposes.<\/p>\n\n\n\n<p>No wonder so many <span id=\"urn:enhancement-ab53dbc4\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/social_group\">social groups<\/span> on Facebook were born meanwhile to gather JS experts and newbys in communities. Usually, behind a succesful group there is a good community leader.<\/p>\n\n\n\n<p>[jwp-video n=&#8221;1&#8243;]<\/p>\n\n\n\n<p>In Italy, for example,&nbsp; <strong>Fabio Biondi <\/strong>is a much apreciated developer whose talks often go sold out. Fabio is the leader of the <em>Italian Angular Community<\/em> and a Google Developer Expert. He works as a freelancer and is an Angular and React mentor as well.<picture><source srcset=\"https:\/\/codemotion.com\/magazine\/wp-content\/uploads\/2019\/12\/MY-IMAGE_1_94d89ab7c5b72a012c4139ffb278367c_800.jpg 1x\" media=\"(max-width: 768px)\"><source srcset=\"https:\/\/codemotion.com\/magazine\/wp-content\/uploads\/2019\/12\/MY-IMAGE_1_94d89ab7c5b72a012c4139ffb278367c_800.jpg 1x\" media=\"(min-width: 769px)\"><\/picture><\/p>\n\n\n\n<p>Fabio has grown an experience commnunity manager. His <span id=\"urn:enhancement-9fddfa1c\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/social_group\">social groups are huge<\/span>, but he is always ready to help and reply to anybody asking for help.<\/p>\n\n\n\t\t\t\t<div class=\"wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-67258372      \"\n\t\t\t\t\tdata-scroll= \"1\"\n\t\t\t\t\tdata-offset= \"30\"\n\t\t\t\t\tstyle=\"\"\n\t\t\t\t>\n\t\t\t\t<div class=\"uagb-toc__wrap\">\n\t\t\t\t\t\t<div class=\"uagb-toc__title\">\n\t\t\t\t\t\t\tTable Of Contents\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"uagb-toc__list-wrap \">\n\t\t\t\t\t\t<ol class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#please-not-another-form\" class=\"uagb-toc-link__trigger\">Please, not another form!<\/a><li class=\"uagb-toc__list\"><a href=\"#what-are-reactive-forms\" class=\"uagb-toc-link__trigger\">What are Reactive Forms?<\/a><ul class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#creating-forms-in-angular\" class=\"uagb-toc-link__trigger\">Creating forms in Angular<\/a><\/li><\/ul><\/li><li class=\"uagb-toc__list\"><a href=\"#angular-reactive-form-vs-tpl-driven-form\" class=\"uagb-toc-link__trigger\">Angular Reactive Form Vs. TPL-Driven Form<\/a><li class=\"uagb-toc__list\"><a href=\"#reactive-forms\" class=\"uagb-toc-link__trigger\">Reactive Forms<\/a><ul class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#scale-your-forms\" class=\"uagb-toc-link__trigger\">Scale your forms<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#custom-validator\" class=\"uagb-toc-link__trigger\">Custom validator<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#nested-form\" class=\"uagb-toc-link__trigger\">Nested Form<\/a><\/li><\/ul><\/li><\/ul><\/li><li class=\"uagb-toc__list\"><a href=\"#dynamic-forms\" class=\"uagb-toc-link__trigger\">Dynamic Forms<\/a><li class=\"uagb-toc__list\"><a href=\"#conclusions\" class=\"uagb-toc-link__trigger\">Conclusions<\/a><\/ul><\/ul><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n<h2 class=\"wp-block-heading\">Please, not another form!<\/h2>\n\n\n\n<p>Some time ago, during one of the events we hosted at Codemotion Italy, Fabio addressed a hard-felt problem among web application developers. No matter what technology you work with or what kind of application you are writing, at some point you will need a <strong>form<\/strong> to collect data.<\/p>\n\n\n\n<p>This is a very boring and repetitive task that every <em>frontender<\/em> wants to get done as quickly as possible. The resulting paper you are going to read is based on Fabio Biondi&#8217;s talk.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-are-reactive-forms\">What are Reactive Forms?<\/h2>\n\n\n\n<p><strong>Reactive forms <\/strong>are a type of form that uses explicit and immutable approaches to managing the state of a form at a given point in time. This means that <a href=\"https:\/\/www.codemotion.com\/magazine\/backend-dev\/benefits-of-reactive-programming-codemotion-magazine\/\" target=\"_blank\" aria-label=\"Reactive  (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">Reactive <\/a>forms provide a way to ensure the integrity of your data between changes.<\/p>\n\n\n\n<p>Reactive forms are a form of dynamic form validation, where inputs and values are provided as streams of input values that can be accessed synchronously.<\/p>\n\n\n\n<p>Reactive forms make it easy to test because you are assured that your data is consistent and predictable. Any consumers of the streams have access to manipulate that data safely.<\/p>\n\n\n\n<p>Reactive forms are a distinct type of form from template-driven forms because they provide:<\/p>\n\n\n\n<ul class=\"is-style-default wp-block-list\">\n<li>synchronous access to the data model<\/li>\n\n\n\n<li>immutability with observable operators<\/li>\n\n\n\n<li>change tracking through observable streams<\/li>\n<\/ul>\n\n\n\n<p>In contrast to reactive forms, template-driven forms allow direct access to modify data in your template. They rely on directives embedded in the template as well as mutable data to track changes asynchronously.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Creating forms in Angular<\/h3>\n\n\n\n<p>When it comes to fomrs, Angular is often overlooked. Yet, there are two different approaches in Angular to build a form.<\/p>\n\n\n\n<p>The first category is <strong>Template-Driven Forms<\/strong>, where you can use HTML syntax. The second one is called <strong>Reactive Forms<\/strong> and it&#8217;s based on <strong>Observable<\/strong> and <strong>RxJS<\/strong> library.<\/p>\n\n\n\n<p>Its structure is defined inside the Component class instead of the Template file definition:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>RxJS is a library with a clear API to work with both asynchronous and synchronous code thanks to pipeline operators and the usage of the Observable concept.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p>Template-Driven Forms represent the first approach we learn as developers, and often it is the only one we use inside our applications. After all, Angular Reactive Forms are a bit harder to understand, and Template Forms can handle almost everything. So, why bother?<\/p>\n\n\n\n<p>The syntax is very much like that of the HTML Forms, and this gives us a good reason to prefer it. Template-driven forms are driven by code in the template. This means that you will see directives like ngModel and ngForm that you can use to basically have the form built for us; they do the dirty work behind its creation.<\/p>\n\n\n\n<p>Reactive forms are also known as <em>model-driven forms<\/em>, where it is explicitly defined in the component class and the HTML content changes depending on the code in the component.<\/p>\n\n\n\n<p>Look at the following template-driven approach:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;form #form=\"ngForm\" (ngSubmit)=\"addUser(form.value)\"&gt;\n    &lt;img class=\"spinner\" *ngIf=\"usernameRef.pending\"&gt;\n    &lt;input type=\"text\"\n           name=\"username\" \n           [ngModel]\n   &nbsp; &nbsp; &nbsp; &nbsp; #usernameRef=\"ngModel\" \n           required\n   &nbsp; &nbsp; &nbsp; &nbsp; UsernameAsyncValidator\n&nbsp; &nbsp; &gt;\n    &lt;button [disabled]=\"form.invalid || form.pending\"&gt;Add User&lt;\/button&gt;\n&lt;\/form&gt;<\/pre>\n\n\n\n<p>You can write and handle an Angular form without writing any single line of JavaScript code. All you need is some directives and built-in validators such as \u201crequired\u201d or \u201cmax-length\u201d or \u201cmin-length\u201d for the form validation. <\/p>\n\n\n\n<p>Or else you can write your own <strong>custom validator<\/strong> like \u201cUsernameAsyncValidator\u201d &#8211; like in the example above.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Angular Reactive Form Vs. TPL-Driven Form<\/h2>\n\n\n\n<p>Let&#8217;s do a comparison between Reactive Forms and TPL-Driven Forms with a simple table:<\/p>\n\n\n\n<figure class=\"wp-block-image image regular\"><img decoding=\"async\" src=\"https:\/\/codemotion.com\/magazine\/wp-content\/uploads\/2019\/12\/MY-IMAGE_2_d214d464f84433ceba6eff2534deb36c_800.png\" alt=\"A table representing a comparison between reactive and template driven forms.\"\/><figcaption class=\"wp-element-caption\">A comparison between reactive and template driven forms<\/figcaption><\/figure>\n\n\n\n<p>As you probably know, Angular is organised in Modules. So, in order to use Template-Driven Form or Reactive Form, you need to import the FormsModule for the first one and the ReactiveFormsModule for the other one &#8211; both from the \u2018@angular\/forms\u2019 package.<\/p>\n\n\n\n<p>There are many differences between Reactive and Template-Driven Forms, the main one being that Reactive is <strong>synchronous<\/strong> while TPL form is <strong>asynchronous<\/strong>.<\/p>\n\n\n\n<p>Other reasons you may want to consider to use Reactive Forms are:<\/p>\n\n\n\n<ol class=\"is-style-default wp-block-list\">\n<li>Template-Driven Forms are Asynchronous because of ngForm and ngModel: these directives take more than one cycle to build the entire control tree, meaning that you must wait for a tick before manipulating any of the controls from within the component class<\/li>\n\n\n\n<li>Custom validators in TDFs need more work<\/li>\n\n\n\n<li>As a template grows, it becomes harder to understand its structure and readability, so Reactive forms are more scalable than TDFs<\/li>\n\n\n\n<li>Although&nbsp;Template-Driven forms are easier to create, they become a challenge when you want to do unit testing, because testing requires the presence of a <em>DOM<\/em>;<\/li>\n\n\n\n<li>Reactive Forms are built with immutable data while Template-Driven forms promote the use of bidirectional binding<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cip6m\">Reactive Forms<\/h2>\n\n\n\n<p>To appreciate Reactive Forms you must understand how they handle complex ones with a lot of validation.<\/p>\n\n\n\n<p>Every control in the form (select, input, checkbox, etc.) has a valueChanges property, an Observable that we can subscribe to to observe changes over time and transform values with RxJS operators in a functional way.<\/p>\n\n\n\n<p>Therefore, a form is treated like a<em> stream of data<\/em> where every field acts like an Observable.<\/p>\n\n\n\n<figure class=\"wp-block-image image regular\"><img decoding=\"async\" src=\"https:\/\/codemotion.com\/magazine\/wp-content\/uploads\/2019\/12\/MY-IMAGE_3_829070ef1f4e380d50f161363a48e5b1_800.png\" alt=\"An image showing a Control Form with the property valueChanges\"\/><figcaption class=\"wp-element-caption\">A Control Form with the property valueChanges<\/figcaption><\/figure>\n\n\n\n<p>Let&#8217;s look at an example of a Reactive Form:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import { Component, OnInit }&nbsp;from '@angular\/core';\nimport { FormControl }&nbsp;from '@angular\/forms';\n\n@Component({\n&nbsp; &nbsp; selector: 'app-login-form',\n&nbsp; &nbsp; template: `\n&nbsp; &nbsp;   &lt;input type=\"text\" [formControl]=\"name\"&gt;\n&nbsp;   `\n)\nexport class LoginComponent implements OnInit {\n&nbsp; name = new FormControl('name');\n&nbsp; ngOnInit() {\n     this.name.valueChanges.subscribe(data =&gt; console.log(data));\n  }\n}<\/pre>\n\n\n\n<p>As you can see, there is a property being declared as <strong>FormControl<\/strong>. You can initialise it with an arbitrary value and link it to the input form from the template. This way, they are always in sync.<\/p>\n\n\n\n<p>You can observe that the value changes made in the template with an explicit subscription to the valueChange property, or use the setValue method to change the value in the component and reflect it into the template. It acts like a bidirectional data binding.<\/p>\n\n\n\n<p>In a Template-Driven Form, every form element is connected to the <em>Model property<\/em> (inside the Component logic) with a ngModel directive.&nbsp;This is the reason why TPL Forms are asynchronous.<\/p>\n\n\n\n<p>The directive ngModel is connected to the \u201cchange detection application life-cycle\u201d, so the value between the <span id=\"urn:enhancement-fad7560b\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/html_element\">HTML element<\/span> and the component is updated after a \u201ctick\u201d of the event loop.<\/p>\n\n\n\n<figure class=\"wp-block-image image regular\"><img decoding=\"async\" src=\"https:\/\/codemotion.com\/magazine\/wp-content\/uploads\/2019\/12\/MY-IMAGE_4_92857157fcbaa71b0dc943b6316cb793_800.jpg\" alt=\"A pictire representing a Template Driven Form with ngModel Directive.\"\/><figcaption class=\"wp-element-caption\">Template Driven Form with ngModel Directive<\/figcaption><\/figure>\n\n\n\n<p>Thanks to the RxJS library, you can use the <em>fromEvent <span id=\"urn:enhancement-3e783d38\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/method_computer_programming\">method<\/span> <\/em>to Observe and subscribe to an event.<\/p>\n\n\n\n<p>Using the Angular <em>ViewChild <\/em>decorator and without using Reactive Forms, you can take the reference of an element of the DOM (<em>e.g.<\/em> a getElementById) and take advantage of RxJS operators to manipulate the data inside an input element:<\/p>\n\n\n\n<figure class=\"wp-block-image image regular\"><img decoding=\"async\" src=\"https:\/\/codemotion.com\/magazine\/wp-content\/uploads\/2019\/12\/MY-IMAGE_5_66b6cd859d1f6d94a3c30d67b3748b6c_800.jpg\" alt=\"An image of a few lines of code to use Viewchild decorator to access an element. Reactive forms in Angular.\"\/><figcaption class=\"wp-element-caption\">Using Viewchild decorator to access an element<\/figcaption><\/figure>\n\n\n\n<p>Of course, you need to know a bit of RxJS &#8211; at least the basic operators like <em>map, filter, take, debounceTime and distinctUntilChanged<\/em>.<\/p>\n\n\n\n<p>Until now, we have not used the basic constructor of Reactive Forms from FormBuilder like FormControl, FormGroup and FormArray. We can use them with FormBuilder or alone, like in the previous example.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Scale your forms<\/h3>\n\n\n\n<p>The next example is a bit harder, because we introduce FormGroup and FormBuilder to construct our form and to have a better scalability on our forms:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import { Component, OnInit } from '@angular\/core';\nimport { FormControl, FormBuilder, FormGroup } from '@angular\/forms';\n \n@Component({\n    selector: 'app-login-form',\n    template: `\n    &lt;form [formGroup]=\"loginForm\" (ngSubmit)=\"submit()\"&gt;\n      &lt;input type=\"text\" [formControl]=\"username\"&gt;\n \n      &lt;button [disabled]=\"loginForm.invalid\"&gt;Login&lt;\/button&gt;\n    &lt;\/form&gt;\n  `\n})\nexport class LoginComponent implements OnInit {\n  loginForm: FormGroup;\n  username = new FormControl('username');\n  constructor(private formBuilder: FormBuilder) {}\n  ngOnInit() {\n    this.loginForm = this.formBuilder.group({\n      username: this.username\n    });\n    this.loginForm.valueChanges.subscribe(data =&gt; console.log(data));\n  }\n \n  submit() {\n    console.log(this.loginForm.value);\n  }\n}<\/pre>\n\n\n\n<p>Angular provides a service called <strong>FormBuilder<\/strong> that allows you to write less code. To use it, you need to inject it inside a Component via <strong>Angular Dependency Injection<\/strong>. Then you can use FormGroup to easily build your forms.<\/p>\n\n\n\n<p>Inside the FormGroup there is an object of key-value pairs, where the key is the name of the control and the value is an array of options such as the initial value, the built-in validators and some custom validators.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"bdnj3\">Custom validator<\/h3>\n\n\n\n<p>A <strong>custom validator<\/strong> is a function that receives an input as to where the control is applied. Inside the body, you can handle some verification code like a match to a Regular Expression.<\/p>\n\n\n\n<p>Inside the component logic, there arethree ways to get a<strong> control reference<\/strong>:<\/p>\n\n\n\n<ol class=\"is-style-default wp-block-list\">\n<li>form.get(\u2018company\u2019)<\/li>\n\n\n\n<li>form.controls[\u2018company\u2019]<\/li>\n\n\n\n<li>form.controls.company<\/li>\n<\/ol>\n\n\n\n<p>Here, &#8220;form\u201d is the reference of my form. They are all equivalent. This is can be useful to control an HTML element inside the component logic.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4i257\">Nested Form<\/h3>\n\n\n\n<p>A <strong>Nested Form Group<\/strong> is a group of input elements that you need to validate together. It allows you to create an array of objects:<\/p>\n\n\n\n<figure class=\"wp-block-image image regular\"><img decoding=\"async\" src=\"https:\/\/codemotion.com\/magazine\/wp-content\/uploads\/2019\/12\/MY-IMAGE_6_2a011e011b4786308682740968be434b_800.jpg\" alt=\"An image showing a Nested Form Group in Reactive Forms. Angular.\"\/><figcaption class=\"wp-element-caption\">Reactive Forms<\/figcaption><\/figure>\n\n\n\n<p>Some working examples:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import { Component, OnInit } from '@angular\/core';\nimport { FormBuilder, FormGroup, Validators } from '@angular\/forms';\n \n@Component({\n    selector: 'app-login-form',\n    template: `\n    &lt;form [formGroup]=\"loginForm\" (ngSubmit)=\"submit()\"&gt;\n      &lt;input type=\"text\" formControlName=\"username\"&gt;\n\n      &lt;input type=\"password\" formControlName=\"password\"&gt;\n      &lt;button [disabled]=\"loginForm.invalid\"&gt;Login&lt;\/button&gt;\n    &lt;\/form&gt;\n  `\n})\nexport class LoginComponent implements OnInit {\n  loginForm: FormGroup;\n  constructor(private formBuilder: FormBuilder) {}\n  ngOnInit() {\n    this.loginForm = this.formBuilder.group({\n      username: ['', [Validators.required, Validators.minLength(2)]],\n      password: ['', [Validators.required, Validators.minLength(4)]],\n    });\n    this.loginForm.valueChanges.subscribe(data =&gt; console.log(data));\n  }\n \n  submit() {\n    console.log(this.loginForm.value);\n  }\n}<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">import { Component, OnInit } from '@angular\/core';\nimport { FormControl, FormBuilder, FormGroup, Validators } from '@angular\/forms';\n \n@Component({\n    selector: 'app-login-form',\n    template: `\n    &lt;form [formGroup]=\"form\" (ngSubmit)=\"send()\"&gt;\n      &lt;input type=\"text\" formControlName=\"username\"&gt;\n      &lt;div formGroupName=\"carInfo\"&gt;\n       \n        &lt;input type=\"text\" formControlName=\"model\"&gt;\n        &lt;input type=\"number\" formControlName=\"kw\"&gt;\n      &lt;\/div&gt;\n      &lt;i class=\"fa fa-check\" *ngIf=\"form.get('carInfo').valid &amp;&amp; form.valid\"&gt;&lt;\/i&gt;\n      &lt;button [disabled]=\"form.invalid\"&gt;Login&lt;\/button&gt;\n    &lt;\/form&gt;\n  `\n})\nexport class LoginComponent implements OnInit {\n  form: FormGroup;\n \n  constructor(private formBuilder: FormBuilder) {}\n  ngOnInit() {\n    this.form = this.formBuilder.group({\n      username: ['', Validators.required],\n      carInfo: this.formBuilder.group({\n        model: ['', Validators.required],\n        kw: ['', Validators.required],\n      })\n    });\n    this.form.valueChanges.subscribe(data =&gt; console.log(data));\n  }\n \n  send() {\n    console.log(this.form.value);\n  }\n}<\/pre>\n\n\n\n<p>You can also validate a field based on the value of another input element such as the password matching form fields.<\/p>\n\n\n\n<p>Every form group can have a <em>second parameter<\/em> where you can specify a <strong>custom validator<\/strong> for the form group itself. This validator is a function where you can pass the reference of the two password fields and do a matching check inside of it.<\/p>\n\n\n\n<p>When your forms grow in complexity, you can split it in <strong>FormGroup<\/strong> or <em>split the UI in Components<\/em>. So, every FormGroup can be represented with a custom element. See below:<\/p>\n\n\n\n<figure class=\"wp-block-image image regular\"><img decoding=\"async\" src=\"https:\/\/codemotion.com\/magazine\/wp-content\/uploads\/2019\/12\/MY-IMAGE_7_aaf42df39dc64222918c32b4846311a8_800.jpg\" alt=\"A picture of the code the Viewchild decorator can be used for to access an element.\"\/><figcaption class=\"wp-element-caption\">Using Viewchild decorator to access an element<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"9rk\">Dynamic Forms<\/h2>\n\n\n\n<p>With <strong>FormArray<\/strong> we are able to display an element dynamically. It is a variant of <strong>FormGroup<\/strong> where data is serialised inside an array instead of an object, like in FormGroup. This is useful when you don\u2019t know how many controls will be hosted inside your dynamic forms.<\/p>\n\n\n\n<p>Finally, you can generate a form at runtime based on a <strong>JSON structure<\/strong> that may come from an <em>XHR REST call<\/em>. The structure of the JSON can contain properties such as label, type (of the input), validators, etc.<\/p>\n\n\n\n<p>Inside the template, you will use *ngFor directive and ngSwitch to select which input type you are going to render to the template.<\/p>\n\n\n\n<p>The problem with this solution is that ngSwitch can grow. Another solution comes from using a <strong>Hash Map<\/strong> for your components to create a form template. For each control you can create a component.<\/p>\n\n\n\n<p>So, in the JavaScript code you&#8217;ll have a cycle for reading the JSON configuration and build a form control at runtime, while for the template you can use a *ngFor; for every iteration a directive called dynamicField will do the trick instantiating the right component for you based on the configuration of the control.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusions<\/h2>\n\n\n\n<p>As you have probably come to realise by now, this is a wide topic which cannot be covered entirely in an article. But, hopefully, it is enough for you to start digging more into it.<\/p>\n\n\n\n<p>Reactive Forms offer a solution to an otherwise tedious task. All you have to do is write and handle an Angular Reactive form without writing a line of JS.Directives and built-in validators such as \u201crequired\u201d or \u201cmax-length\u201d or \u201cmin-length\u201d  are all you need for the form validation.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>During Codemotion Rome 2019, Fabio Biondi explained how to make reactive forms using Angular. In this article you will learn most of his thoughts, with many working examples.<\/p>\n","protected":false},"author":79,"featured_media":16832,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":8,"_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":[6],"tags":[54],"collections":[],"class_list":{"0":"post-2172","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend","8":"tag-react","9":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Reactive Forms in Angular - Codemotion Magazine<\/title>\n<meta name=\"description\" content=\"Italian Angular Community leader and Google Developer Expert Fabio Biondi explains how to make reactive forms with Angular- Working examples.\" \/>\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\/frontend\/reactive-forms-in-angular\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Reactive Forms in Angular\" \/>\n<meta property=\"og:description\" content=\"Italian Angular Community leader and Google Developer Expert Fabio Biondi explains how to make reactive forms with Angular- Working examples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/frontend\/reactive-forms-in-angular\/\" \/>\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=\"2021-07-06T02:21:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-08T14:52:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/frontend-4342425_1280.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"905\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Lorenzo Franceschini\" \/>\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=\"Lorenzo Franceschini\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/reactive-forms-in-angular\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/reactive-forms-in-angular\/\"},\"author\":{\"name\":\"Lorenzo Franceschini\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/c48e30a376daa81f0b5099d3e0c16b04\"},\"headline\":\"Reactive Forms in Angular\",\"datePublished\":\"2021-07-06T02:21:00+00:00\",\"dateModified\":\"2022-11-08T14:52:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/reactive-forms-in-angular\/\"},\"wordCount\":1870,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/reactive-forms-in-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/frontend-4342425_1280.png\",\"keywords\":[\"React\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/reactive-forms-in-angular\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/reactive-forms-in-angular\/\",\"name\":\"Reactive Forms in Angular - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/reactive-forms-in-angular\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/reactive-forms-in-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/frontend-4342425_1280.png\",\"datePublished\":\"2021-07-06T02:21:00+00:00\",\"dateModified\":\"2022-11-08T14:52:18+00:00\",\"description\":\"Italian Angular Community leader and Google Developer Expert Fabio Biondi explains how to make reactive forms with Angular- Working examples.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/reactive-forms-in-angular\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/frontend\/reactive-forms-in-angular\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/reactive-forms-in-angular\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/frontend-4342425_1280.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/frontend-4342425_1280.png\",\"width\":1280,\"height\":905},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/reactive-forms-in-angular\/#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\/frontend\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Reactive Forms in Angular\"}]},{\"@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\/c48e30a376daa81f0b5099d3e0c16b04\",\"name\":\"Lorenzo Franceschini\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/adfbaabe86bc433a00657b5827f9f5d47c1d66c20519afedcf67805ef30c9fb2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/adfbaabe86bc433a00657b5827f9f5d47c1d66c20519afedcf67805ef30c9fb2?s=96&d=mm&r=g\",\"caption\":\"Lorenzo Franceschini\"},\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/lorenzo-franceschini\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Reactive Forms in Angular - Codemotion Magazine","description":"Italian Angular Community leader and Google Developer Expert Fabio Biondi explains how to make reactive forms with Angular- Working examples.","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\/frontend\/reactive-forms-in-angular\/","og_locale":"en_US","og_type":"article","og_title":"Reactive Forms in Angular","og_description":"Italian Angular Community leader and Google Developer Expert Fabio Biondi explains how to make reactive forms with Angular- Working examples.","og_url":"https:\/\/www.codemotion.com\/magazine\/frontend\/reactive-forms-in-angular\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2021-07-06T02:21:00+00:00","article_modified_time":"2022-11-08T14:52:18+00:00","og_image":[{"width":1280,"height":905,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/frontend-4342425_1280.png","type":"image\/png"}],"author":"Lorenzo Franceschini","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Lorenzo Franceschini","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/reactive-forms-in-angular\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/reactive-forms-in-angular\/"},"author":{"name":"Lorenzo Franceschini","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/c48e30a376daa81f0b5099d3e0c16b04"},"headline":"Reactive Forms in Angular","datePublished":"2021-07-06T02:21:00+00:00","dateModified":"2022-11-08T14:52:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/reactive-forms-in-angular\/"},"wordCount":1870,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/reactive-forms-in-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/frontend-4342425_1280.png","keywords":["React"],"articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/reactive-forms-in-angular\/","url":"https:\/\/www.codemotion.com\/magazine\/frontend\/reactive-forms-in-angular\/","name":"Reactive Forms in Angular - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/reactive-forms-in-angular\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/reactive-forms-in-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/frontend-4342425_1280.png","datePublished":"2021-07-06T02:21:00+00:00","dateModified":"2022-11-08T14:52:18+00:00","description":"Italian Angular Community leader and Google Developer Expert Fabio Biondi explains how to make reactive forms with Angular- Working examples.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/reactive-forms-in-angular\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/frontend\/reactive-forms-in-angular\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/reactive-forms-in-angular\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/frontend-4342425_1280.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/frontend-4342425_1280.png","width":1280,"height":905},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/reactive-forms-in-angular\/#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\/frontend\/"},{"@type":"ListItem","position":3,"name":"Reactive Forms in Angular"}]},{"@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\/c48e30a376daa81f0b5099d3e0c16b04","name":"Lorenzo Franceschini","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/adfbaabe86bc433a00657b5827f9f5d47c1d66c20519afedcf67805ef30c9fb2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/adfbaabe86bc433a00657b5827f9f5d47c1d66c20519afedcf67805ef30c9fb2?s=96&d=mm&r=g","caption":"Lorenzo Franceschini"},"url":"https:\/\/www.codemotion.com\/magazine\/author\/lorenzo-franceschini\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/frontend-4342425_1280-600x400.png","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/frontend-4342425_1280-600x600.png","author_info":{"display_name":"Lorenzo Franceschini","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/lorenzo-franceschini\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/frontend-4342425_1280.png",1280,905,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/frontend-4342425_1280-150x150.png",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/frontend-4342425_1280-300x212.png",300,212,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/frontend-4342425_1280-768x543.png",768,543,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/frontend-4342425_1280-1024x724.png",1024,724,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/frontend-4342425_1280.png",1280,905,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/frontend-4342425_1280.png",1280,905,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/frontend-4342425_1280.png",100,71,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/frontend-4342425_1280-180x128.png",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/frontend-4342425_1280-896x504.png",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/frontend-4342425_1280-400x225.png",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/frontend-4342425_1280-600x400.png",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/frontend-4342425_1280-600x600.png",600,600,true]},"uagb_author_info":{"display_name":"Lorenzo Franceschini","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/lorenzo-franceschini\/"},"uagb_comment_info":0,"uagb_excerpt":"During Codemotion Rome 2019, Fabio Biondi explained how to make reactive forms using Angular. In this article you will learn most of his thoughts, with many working examples.","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/2172","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\/79"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=2172"}],"version-history":[{"count":10,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/2172\/revisions"}],"predecessor-version":[{"id":19323,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/2172\/revisions\/19323"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/16832"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=2172"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=2172"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=2172"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=2172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}