Formly Blog

Formly is an open-source library for creating dynamic web forms

The goal of the Formly library is to simplify the process of creating and 
maintaining web forms, decreasing the amount of HTML code in favor of 
Typescript. It uses a simple JSON object to define the structure and 
validation of a form, which is then rendered using a template. This allows 
developers to quickly create forms with a variety of field types, Including 
text inputs, checkboxes, and select lists. It also provides a range of built
-in validation options and the ability to add custom validation. This makes
it easy to ensure that form data is accurate and complete before it is 
submitted. 
The main reason behind introducing Formly was to simplify the 
process of creating forms in Angular.Angular is a powerful framework for 
building web applications, but creating forms in Angular can be a complex 
and time-consuming task, especially when dealing with complex forms that 
have different input types and validation rules. Additionally, Formly provides
a set of APIs for interacting with the forms it generates, such as setting 
and getting values, and triggering validation. This makes it easy to build 
complex form-based interactions and workflows.

Packages Required:?

·?????? @ngx-formly/core

·?????? @ngx-formly/material @angular/material

To use Formly JSON schema in an Angular application, you need to install the @ngx-formly/core and @ngx-formly/material libraries. These libraries provide the necessary components and services for rendering forms and validating form data. Once these libraries are installed, you can define your form's structure and validation using a JSON object, which can then be passed to the Formly module's config. The JSON object should include an array of fields, where each field has a type, a label, and other properties such as validation rules.

For Example:

const form = new FormGroup({});
const fields: FormlyFieldConfig[] = [
? {
??? key: 'name',
??? type: 'input',
??? templateOptions: {
????? label: 'Name',
????? required: true,
??? },
? },
? {
??? key: 'email',
??? type: 'input',
??? templateOptions: {
????? label: 'Email',
????? type: 'email',
????? required: true,
??? },
? },
]; ?

Output:

You can then use the FormlyModule to render the form in a template, 
and use the formlyForm directive to bind the form to the JSON schema.

<form [formGroup]="form" (ngSubmit)="submit(form.value)">

? <formly-form [form]="form" [fields]="fields"></formly-form>

? <button type="submit" [disabled]="form.invalid">Submit</button>

</form>

OutPut:

Features of Formly:

Simple JSON schema: Formly uses a simple JSON object to define the structure 
and validation of a form, making it easy to create forms with a variety of 
field types, including text inputs, checkboxes, and select lists.

Built-in validation: Formly provides a range of built-in validation options, 
as well as the ability to add custom validation. This makes it easy to ensure
that form data is accurate and complete before it is submitted.

Reactive forms support: Formly works with Angular's Reactive Forms module, 
which allows for a more efficient handling of form data and validation.

Dynamic forms: Formly allows you to create dynamic forms, where the fields 
and validation rules can be changed at runtime. This is useful for creating 
forms that adapt to the user's input or for creating multi-step forms.

Customizable templates: Formly allows you to customize the template used to 
render forms, allowing you to create forms that match your application's 
design.

Easy integration: Formly is easy to integrate into your Angular application 
and it provides a set of APIs for interacting with the forms it generates, 
such as setting and getting values, and triggering validation.

Customizable validation messages: Formly allows you to customize the 
validation messages for different fields, making it easy to provide clear 
and informative feedback to users.

In summary, Formly is a robust library for Angular that allows for easy 
creation of dynamic and complex forms, with built-in validation, dynamic 
forms, customizable templates, easy integration and custom validation 
messages.

?

?

References:

·?????? https://formly.dev/docs/guide/getting-started

·?????? https://indepth.dev/tutorials/angular/how-to-use-ngx-formly-with-angular

·?????? https://github.com/ngx-formly/ngx-formly