--- title: "RFC: Strictly Typed Reactive Forms Gotchas Every Angular Developer Needs to Know" description: Strictly typed Reactive Forms should be enough of a selling point to migrate to Angular 14, but doesn’t come without flaws; learn gotchyas to watch out for image: https://www.bitovi.com/hubfs/RFC-%20Strictly%20Typed%20Reactive%20Forms%20Gotchas%20Every%20Angular%20Developer%20Needs%20to%20Know.png --- - ![AI implementation](https://www.bitovi.com/hubfs/AIConsultingIcon.svg) [AI implementation](https://www.bitovi.com/services/ai-consulting) - ![Systems engineering](https://www.bitovi.com/hubfs/icon%20-%20backend.svg) [Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting) - ![Project Management](https://www.bitovi.com/hubfs/icon%20-%20PM.svg) [Project Management](https://www.bitovi.com/services/agile-project-management-consulting) - ![Product Design](https://www.bitovi.com/hubfs/icon%20-%20design.svg) [Product Design](https://www.bitovi.com/services/product-design-consulting) - ![Frontend development](https://www.bitovi.com/hubfs/icon%20-%20frontend.svg) [Frontend development](https://www.bitovi.com/services/frontend-development-consulting) - [View more → ](https://www.bitovi.com/digital-consulting-services) We're Experts in... - [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting) - [AI training](https://www.bitovi.com/ai-training-for-software-engineers) - [Angular](https://www.bitovi.com/services/frontend/angular-consulting) - [Design systems](https://www.bitovi.com/services/axure-figma-migration) - [React](https://www.bitovi.com/services/frontend/react-consulting) - [Temporal](https://www.bitovi.com/services/backend/temporal-consulting) - [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native) - [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting) Showcase ![Yum! Brands](https://www.bitovi.com/hubfs/yum-showcase-link-1.png) [View case study](https://www.bitovi.com/en/bitovi-yum-case-study) More Projects - [![Levi's](https://www.bitovi.com/hubfs/levis.svg)](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign) - [![Christie's International Real Estate](https://www.bitovi.com/hubfs/christies.svg)](https://design.bitovi.com/christies) - [![BAFS](https://www.bitovi.com/hubfs/bafs.svg)](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp) - [View more → ](https://www.bitovi.com/our-software-consulting-work) Open Source Tools We build powerful tools and open source them to support the community. [See what we've built →](https://www.bitovi.com/open-source) - [![Blog](https://www.bitovi.com/hubfs/icon%20-%20blog.svg) BlogWe post about delivering products and solving problems. ](https://www.bitovi.com/blog) - [![Partnerships](https://www.bitovi.com/hubfs/Handshake-1.svg) PartnershipsLearn about Bitovi's technology partners ](https://www.bitovi.com/partnerships) - [![Academy](https://www.bitovi.com/hubfs/icon%20-%20academy%20(4).svg) AcademyFree courses to build delivery skills ](https://www.bitovi.com/academy) - [![Open source tools](https://www.bitovi.com/hubfs/icon%20-%20open%20source.svg) Open source toolsUse or contribute to our community ](https://www.bitovi.com/open-source) Let's Connect - [![Discord](https://www.bitovi.com/hubfs/DiscordLogo.svg) Discord ](https://discord.gg/J7ejFsZnJ4) - [![LinkedIn](https://www.bitovi.com/hubfs/LinkedinLogo.svg) LinkedIn ](https://www.linkedin.com/company/bitovi/) - [![GitHub](https://www.bitovi.com/hubfs/GithubLogo.svg) GitHub ](https://github.com/bitovi/) ![Eggbot](https://www.bitovi.com/hubfs/build_assets/bitovi-limbo-cms-react/338/js_client_assets/assets/eggbot-LTGhdSGL.png) Name * Work Email * Phone What's your project? Send ### Contact Us (312) 620-0386contact@bitovi.com [ Angular ](https://www.bitovi.com/blog/topic/angular) | April 12, 2022 # RFC: Strictly Typed Reactive Forms Gotchas Every Angular Developer Needs to Know Strictly typed Reactive Forms should be enough of a selling point to migrate to Angular 14, but doesn’t come without flaws; learn gotchyas to watch out for ![Mark Thompson](https://www.bitovi.com/hubfs/People/mark-thompson.jpg) Mark Thompson Share: [![Twitter](https://www.bitovi.com/hubfs/limbo-generated/_astro/twitter-white.os3xLc3C_Z2nW4or.svg) ](https://twitter.com/intent/tweet?text=) [![Reddit](https://www.bitovi.com/hubfs/limbo-generated/imgs/icons/reddit.png) ](http://reddit.com/submit?url=) Angular is a robust framework suitable for large codebases and enterprise applications. One significant contributing factor is Angular’s support for [TypeScript](https://www.typescriptlang.org/). Angular is built entirely in TypeScript, and because TypeScript is Angular’s primary language, Angular’s documentation treats TypeScript as a first-class citizen. With [RFC: Strictly Typed Reactive Forms](https://github.com/angular/angular/discussions/44513) [complete](https://github.com/angular/angular/discussions/44513#discussioncomment-2038985), many expect to have strictly typed reactive forms in the upcoming Angular 14 update. After playing around with the [Strictly Typed Reactive Forms prototype](https://github.com/angular/angular/discussions/44513#user-content-prototype), I am super excited about this upcoming feature. Not only are we getting strict types for reactive forms, but we are also getting a minor feature: the `initialValueIsDefault` option for `FormControlOptions` which will allow for resetting form values back to their initial value rather than `null` by default:  ![4aa2c6a5-e247-4af3-9916-431ecb5822f0](https://www.bitovi.com/hs-fs/hubfs/4aa2c6a5-e247-4af3-9916-431ecb5822f0.png?width=978&name=4aa2c6a5-e247-4af3-9916-431ecb5822f0.png)   ![](blob:https://bitovi.atlassian.net/e042fc34-ad14-4680-978f-a1305f490f6d#media-blob-url=true&id=ed2ae3a5-aed8-4b92-9e68-3abdcfca91f9&collection=contentId-115769488&contextId=115769488&mimeType=image%2Fpng&name=VmpBxLCQHrZKW6BUTpljn1ANiAlEO4nnE1C8iro4tdA1OfEC-3nn_CYrXS7ELee3bjc_ZwYou-MX8Fvfmxa17TdgyZdkjsaw76JvAFSfR5jdAUBd2NjHd1v5r-rykPVMJlKxlwDxNgQD&size=50998&height=226&width=960&alt=)![e042fc34-ad14-4680-978f-a1305f490f6d](https://www.bitovi.com/hs-fs/hubfs/e042fc34-ad14-4680-978f-a1305f490f6d.png?width=960&name=e042fc34-ad14-4680-978f-a1305f490f6d.png)   ## Strictly Typed Reactive Forms Gotchas   Strictly typed [Reactive Forms](https://angular.io/guide/reactive-forms) should be enough of a selling point to migrate to Angular 14, but it doesn’t come without flaws: 1. Reactive Forms have tricky types involving `null` and `undefined`. 2. `FormArray` generic doesn’t support [Tuples](https://www.typescriptlang.org/docs/handbook/2/objects.html#tuple-types). 3. `FormBuilder` syntactic sugar doesn’t infer proper generic types. 4. [Template-driven Forms](https://angular.io/guide/forms) and [Control Bindings](https://angular.io/guide/reactive-forms#adding-a-basic-form-control) mismatch underlying control type and bound `FormControl` type. We will go over each one of these gotchas and provide explanations so you can spend less time debugging and have more time building complex forms. ## Reactive Forms Have Tricky Types Involving null and undefined Reactive Forms having tricky types isn’t specific to the [Strictly Typed Reactive Forms update](https://github.com/angular/angular/discussions/44513), but if you’re not aware of how `null` and `undefined` play a role in Reactive Forms, you’re likely to run into [type errors](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#null-and-undefined). `null` is a common type when considering that `FormControl` value can be null whenever `.reset()` is called. This is documented and explained in [RFC: Strictly Typed Reactive Forms](https://github.com/angular/angular/discussions/44513) under **Nullable Controls and Reset**. `initialValueIsDefault` option for `FormControloptions` can be used to avoid this situation by passing true. This will make the `FormControl` value non-nullable:   ![](blob:https://bitovi.atlassian.net/38f10496-0985-48a9-a945-532d6f138e3e#media-blob-url=true&id=97b93dae-d87c-421a-b99f-1d73442ec731&collection=contentId-115769488&contextId=115769488&mimeType=image%2Fgif&name=Skl_CvXwUFmpUH9tDkiU9fj9nx5tPF9bCzEeelJFKPSa_9vrV-o2ts3iIfu26iEi2s8btjjYZDha6ZUIrhHYnLO61Qbk1W3G2krbE3_66BH4IlNPWRWbujIUgAuKsUgIgZG_is5XIBtc&size=402635&height=182&width=600&alt=)![38f10496-0985-48a9-a945-532d6f138e3e](https://www.bitovi.com/hs-fs/hubfs/38f10496-0985-48a9-a945-532d6f138e3e.gif?width=600&name=38f10496-0985-48a9-a945-532d6f138e3e.gif)   Any disabled control’s value can be excluded from its `FormGroup` or `FormArray` value. In these situations, it’s easy to stumble upon `undefined` when expecting some nested control value. This is documented and explained in [RFC: Strictly Typed Reactive Forms](https://github.com/angular/angular/discussions/44513) under **Disabled Controls**. Since `FormGroup` provides `.removeControl()` and `.addControl()` , you will have to explicitly mark that control’s key in the `FormGroup` as [optional](https://www.typescriptlang.org/docs/handbook/2/objects.html#optional-properties). This is documented and explained in [RFC: Strictly Typed Reactive Forms](https://github.com/angular/angular/discussions/44513) under **Adding and Removing Controls**. ## FormArray generic doesn’t support Tuples Currently, `FormArrays` are homogeneous - every control in a `FormArray` is of the same type. Attempting to use a Tuple of `FormControls` for its generic type will result in a type error:   ![](blob:https://bitovi.atlassian.net/45eb5f75-1c07-480f-a7ca-0df109ba3b63#media-blob-url=true&id=dec43ebc-cd34-4a7f-aa37-c7702b975cb0&collection=contentId-115769488&contextId=115769488&mimeType=image%2Fgif&name=Ids8J7SERHzCSV-4ELRu2uSBZFhgvrZ3LKjF-i338EcCrZhCz_FNZhbpBkTS3l-cjRoQ9lYT_tSdXq_Y2r3UHh2pFNSYjMHDpEW8iTi8Re7wcSzv0Y_2K7cjai7C8glZ_I0I-VAWzzOn&size=486836&height=337&width=600&alt=)![45eb5f75-1c07-480f-a7ca-0df109ba3b63](https://www.bitovi.com/hs-fs/hubfs/45eb5f75-1c07-480f-a7ca-0df109ba3b63.gif?width=693&name=45eb5f75-1c07-480f-a7ca-0df109ba3b63.gif)   Luckily the [Strictly Typed Reactive Forms update](https://github.com/angular/angular/discussions/44513) anticipates that most projects will not be 100% compatible with the update and provide a backward-compatible workaround. You can opt-out of strictly typed Reactive Forms by providing the explicit any generic to the `FormArray`. Or, in this specific situation, you can union the expected generic types for each `FormControl`:  ![70422b91-d766-42be-a507-785ad9d288b3](https://www.bitovi.com/hs-fs/hubfs/70422b91-d766-42be-a507-785ad9d288b3.gif?width=689&name=70422b91-d766-42be-a507-785ad9d288b3.gif) ![](blob:https://bitovi.atlassian.net/70422b91-d766-42be-a507-785ad9d288b3#media-blob-url=true&id=7669926b-99e4-4722-a828-94ec329857fe&collection=contentId-115769488&contextId=115769488&mimeType=image%2Fgif&name=UTzYQG8Pjc8Aynv-61gzOlJDeL1xTxJmMNZYP0hZj9rDbOVEjuP4ZGXEkcbkjbAobabwZ2MCswUgFc6ovCsl0BZ5-BVUVMo_HwFzwd_48jR132ZX0qzWn5tq-NqxhO0-XbO3kBC5SQ-9&size=885879&height=162&width=600&alt=)   For now, we’ll have to settle for `FormArray` with a single-typed `FormControl` array as its generic. Support for Tuple-typed `FormArrays` will likely become added in a follow-up update. ## FormBuilder Syntactic Sugar Doesn’t Infer Proper Generic Types `FormBuilder` provides syntactic sugar that shortens creating instances of `FormControl`, `FormGroup`, or `FormArray`. Typically this reduces the amount of boilerplate needed to build complex forms. Still, since `FormBuilder` can’t infer the generic types like how `FormGroup` or `FormArray` constructor does, you end up with type errors complaining that `AbstractControl` isn’t assignable to type `FormControl`:   ![](blob:https://bitovi.atlassian.net/697668e2-ef4c-4d99-ba33-1f566829467d#media-blob-url=true&id=933f1605-45c7-4063-a0b9-0cd64050eab0&collection=contentId-115769488&contextId=115769488&mimeType=image%2Fgif&name=ezgif.com-gif-maker%20(1).gif&size=1105066&height=359&width=507&alt=)![697668e2-ef4c-4d99-ba33-1f566829467d](https://www.bitovi.com/hs-fs/hubfs/697668e2-ef4c-4d99-ba33-1f566829467d.gif?width=691&name=697668e2-ef4c-4d99-ba33-1f566829467d.gif)   ## Template-driven Forms and Control Bindings Angular's template type checking engine will not be able to assert that the value produced by the underlying control (described by its `ControlValueAccessor`) is of the same type as the `FormControl`. This is documented and explained in [RFC: Strictly Typed Reactive Forms](https://github.com/angular/angular/discussions/44513) under **Control Bindings.** The above restriction also applies to `NgModel` and [template-driven forms](https://angular.io/guide/forms-overview#setup-in-template-driven-forms). This is documented and explained in [RFC: Strictly Typed Reactive Forms](https://github.com/angular/angular/discussions/44513) under **Template-driven Forms.** You won’t get a type error when binding a `FormControl` with a string value to a DOM element that has a numeric value. This is a limitation introduced by the current template type-checking mechanism where a `FormControlDirective` which binds to a control does not have access to the type of the `ControlValueAccessor`. The [RFC: Strictly Typed Reactive Forms](https://github.com/angular/angular/discussions/44513) may not be perfect, but it’s a feature that has been [asked for since 2016](https://github.com/angular/angular/issues/13721#issue-198158565) and is highly anticipated by many seasoned Angular developers. Strict types for Reactive Forms in Angular will help developers write better code and help significantly with debugging. It will ensure better code quality, but it will provide an easier comprehension of how the [Reactive Forms API](https://angular.io/guide/reactive-forms) works in general. Please try out the [Strictly Typed Reactive Forms prototype](https://github.com/angular/angular/discussions/44513#user-content-prototype), fork the [demo repo](https://github.com/dylhunn/typed-forms-example-app), and share your thoughts. Previous Post ![](https://www.bitovi.com/hs-fs/hubfs/Imported%20sitepage%20images/photo-1582213782179-e0d53f98f2ca.jpeg?height=117&name=photo-1582213782179-e0d53f98f2ca.jpeg) [ My Favorite Panels from AxeCon 2022 ](https://www.bitovi.com/blog/my-favorite-panels-from-axecon-2022)   Next Post ![](https://www.bitovi.com/hs-fs/hubfs/Dark%20Pattern_Social%20Media-100.jpg?height=117&name=Dark%20Pattern_Social%20Media-100.jpg) [ The Dark Side of Design ](https://www.bitovi.com/blog/the-dark-side-of-design) ```json { "@context" : "http://schema.org", "@type" : "Organization", "address" : { "@type" : "PostalAddress", "addressCountry" : "United States", "addressLocality" : "Libertyville", "addressRegion" : "IL", "postalCode" : "60048", "streetAddress" : "1134 Pine Tree Lane " }, "alternateName" : "Bitovi", "areaServed" : { "@type" : "GeoCircle", "geoMidpoint" : { "@type" : "GeoCoordinates", "latitude" : "41.8781", "longitude" : "87.6298" }, "geoRadius" : "5000 km" }, "description" : "Bitovi is a UX, UI design and front-end JavaScript development consulting company", "email" : "contact@bitovi.com", "image" : "https://www.bitovi.com/hubfs/bitovi-logo-x2.png", "logo" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg", "mainEntityOfPage" : { "@id" : "https://www.bitovi.com/blog/rfc-strictly-typed-reactive-forms-gotchas-every-angular-developer-needs-to-know", "@type" : "WebPage", "description" : "Strictly typed Reactive Forms should be enough of a selling point to migrate to Angular 14, but doesn’t come without flaws; learn gotchyas to watch out for" }, "naics" : "541511", "name" : "Bitovi Web App Consulting", "sameAs" : [ "https://www.facebook.com/BitoviLLC/", "https://twitter.com/bitovi", "https://www.linkedin.com/company/bitovi" ], "telephone" : "312-620-0386", "url" : "http://bitovi.com" } ``` ```json { "@context" : "http://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Mark Thompson" }, "dateModified" : "September 27, 2023, 3:03:11 PM", "datePublished" : "2022-04-12 13:25:23", "description" : "Strictly typed Reactive Forms should be enough of a selling point to migrate to Angular 14, but doesn’t come without flaws; learn gotchyas to watch out for", "headline" : "RFC: Strictly Typed Reactive Forms Gotchas Every Angular Developer Needs to Know", "image" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/RFC-%20Strictly%20Typed%20Reactive%20Forms%20Gotchas%20Every%20Angular%20Developer%20Needs%20to%20Know.png" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg" }, "name" : "Bitovi" } } ```