Building reactive forms with RxFormMapper

What’s RxFormMapper?

When to use RxFormMapper?

export class User {
name: string;
surname: string;
age: number;
new FormGroup(
name: new FormControl(,
surname: new FormControl(user.surname),
age: new FormControl(user.age),
export class User {	@FormControl()
name: string;
surname: string;
age: number;

Why use RxFormMapper?

  • Zero configuration: through annotations removes the boilerplate for creating and assigning forms.
  • Dependency Injection: RxFormMapper take advantage from Angular DI container in order to resolves validators and custom mappers.
  • Custom mappers: If you want to create custom forms for specific fields, you can do it simple by @CustomControl decorator.

Let’s start writing code

Install npm package

npm i rx-form-mapper --save
npm i reflect-metadata --save

Import the component modules

Define your model

Annotate it

Wait... AsyncValidators? How to inject services?!

Build your form





Fullstack Developer | Based in Florence | |

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Implicit resolution in Scala: an example with spray-json

Function Declaration vs. Function Expression

Angular reactive form generation out of streams

ACA 400 — Week 5 Questions

Frontend Testing With Typescript Workshop

JavaScript objects and it’s secrets you should know!!

Media Queries: Here I come!

JavaScript: Declaring variables with Var, Let, and Const

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Iacopo Ciao

Iacopo Ciao

Fullstack Developer | Based in Florence | |

More from Medium

Make an ESLint plugin for your team

implementing laser barcode reader ionic angular + zebra/honeywell

A smooth Angular migration strategy in a chaotic world

How to migrate your (Nx) Angular 13 App with Tailwind CSS v2 to version 3