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(user.name),
surname: new FormControl(user.surname),
age: new FormControl(user.age),
);
export class User {	@FormControl()
name: string;
@FormControl()
surname: string;
@FormControl()
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

Conclusion

--

--

--

Fullstack Developer | Based in Florence | https://github.com/KernelPanic92 | https://iacopociao.com

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 | https://github.com/KernelPanic92 | https://iacopociao.com

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