Angular Reactive Forms using Angular Formly

This Blog has moved from Medium to blogs.tensult.com. All the latest content will be available there. Subscribe to our newsletter to stay updated.

Angular Formly makes it easier to use the Angular Reactive Form. If we use Angular Formly to design an Angular Reactive Form, we don’t need to put the validation logic for every field, we can put our own custom validation and eliminates the need to write long template code. We define all the form field in the typescript file itself.

Advantages of using Angular Formly

• No need to write lengthy template code as we have all the form fields in the component typescript file itself.
• We can mark our fields as required.
• Easy custom validation and error messages.

Setup

I am assuming that you are already running an application using Angular 6 and Angular material design. So I will not be describing that here, rather just explaining the concept you need to create a Reactive form using Angular Formly.

To install Angular Formly in your app follow this documentation.

After completing the installing process, first create a Module in your Angular application named — createUserModule and copy the following file.

You have to be familiar with some of the concepts to understand the above code as below :

key — Mainly relates to the model. This will link your field values to the model.

type — The type of the field you want to pass. In this case, I am passing the ‘input’ type here.

templateOptions — Here you can mention the template related operations. Please go through the createUser.ts file to understand it better.

fields — Here you need to specify all the fields to build a form.

model — Every field’s input data is stored into the model.

So in the above “createUser.ts” file I simply created a Formly form with four fields, which I declared in the fields array declarations .In the @NgModule imports array I defined the custom validation for the form. The “submit()” function will return the fields input data into the browser console.

Following is the component template code that actually helps you to add inputs for your model and field configuration objects.

The style file for the template :

Now just include createUserModule in the “app.module.ts” the same way as you did for the other modules in Angular application.

In the app.routes.ts you can add your routes, where all your routes are defined the same way as you defined the routes for the earlier routes in your Angular application . Following code is only for adding the createUser component in the app.routes.ts. Don’t replace the old “app.routes.ts” with this code instead add the createUser routes there.

How to hide any field in Angular Formly ?

By Using hideExpression property of Angular Formly you can hide any field. Follow the same format if you want to hide any field.

In the above example, we are hiding the ‘id’ field by using the hideExpression: ‘model.id’. We don’t hide any fields while creating the form. We are using this hide fields property during editing any form data because a few cases may arise that you don’t want to show certain fields after editing the form. Let’s say usually we don’t show the ‘id’ field after editing the form.

You have now successfully created a Reactive Form using Angular Formly. After clicking on the submit button you can view form data in the console of your browser.