Angular Forms Story: Alternatives
Strong typing Forms libraries and articles overview.
Seems there’s a lot to be said about strongly typing @angular/forms…
This is part of the Angular Forms Story series:
While looking into making my forms type-safe I found that a lot of people have already done a lot of work both as part of the Angular framework and external to the it. I’ll try to list and shortly summarize my findings here.
Here’s what we’ll see:
- efforts internal to Angular to make using Angular Forms easy, type-safe, maintainable and scalable.
- libraries trying to do the same from the outside
- other articles on the subject
- alternatives to strong typing your forms
Internal:
- the suggestion to improve upon the existing ReactiveFormsModule by introducing ReactiveFormsModule2 — here https://github.com/angular/angular/issues/31963
- strong typing (part of) AbstractFormControl https://github.com/angular/angular/pull/20040
External
Some are only articles but the majority have exposed functionality via an npm package. Let’s start with them and then on the articles.
Packages
- ngx-sub-form — the title says it all. Article talks in detail about nesting forms and extracting common form parts, boilerplate in a base class and. Article Building scalable robust and type safe forms with Angular.
- ngx-strongly-typed-forms strongly typed forms packaged as a module (Angular module). From the docs: “…not backwards compatible with Angulars AbstractControl…”
- @ng-stack/forms — wraps ReactiveFormsModule and strong types the forms, controls, validation everything. Looks like it’s in active development.
- angular-typesafe-reactive-forms-helper — exposes types that replace
@angular/formstypes and exposes a type-safe FormsBuilder service that can be part of your Angular app. Article Angular Typesafe Reactive Forms With TypeScript. - ngx-forms-typed — type-your-forms package that exposes a few functions and types that you can use to strong-type your forms and connect parent-forms to child-forms. Article Angular Forms Story: Strong Types.
This is the one I maintain. - @ajsf/core — Something of an oddball. It has typed forms, components. Seems like you need to tell these components which framework to use (material, bootstrap) which seems useful. But it’s a component-level
@Input()config and not a module-level config as I would expect i.e.AjsfModule.forRoot({framework: 'material'}). It supports Angular as well as React and JQuery and others so that makes it a bit of a Formly (see below). - ngx-strong-forms — Adding strong types to forms. The caveat is that it looks like it’s not been updated for over a year.
Articles:
- Don’t reinvent the wheel when implementing ControlValueAccessor describing the boilerplate and how to hide it in a base class.
- Working with forms in an enterprise environment — (my personal favorite) describes how and why to segregate your forms and sub-forms (nested forms) especially in the context of large, long-lived apps. It also lists more resources in the form of articles.
- Make Angular Reactive Forms strongly typed - summary of two approaches to achieving type safety with ups and downs.
- some of the packages listed above include detailed articles
Alternatives
These represent different approaches to handling forms — JSON configured forms and global forms management.
- Formly — The very popular “JSON powered / Dynamic forms in Angular“ package @ngx-formly. It’s in a class of its own
- @ngneat/forms-manager — A different approach — manage all your active form instances (form groups) using this package. As in anywhere in the app.
Thanks for reading! Did I miss your favorite library for handling forms? Please leave a comment!
I am working on a few Open Source Angular Dev Tooling projects.
Check them out at:
SCuri — Unit test boilerplate automation (with Enterprise support option too)
ngx-forms-typed — Angular form, only strong typed!
ngx-show-form-control — Visualize/Edit any FormControl/Group
