Angular Formly is a dynamic form library for Angular that simplifies the process of creating forms by allowing you to define your forms using JSON objects. In this tutorial, we’ll walk through the steps to set up and use Angular Formly in your Angular project.

Step 1: Install Angular Formly

You can install Angular Formly via npm:

npm install @ngx-formly/core @ngx-formly/bootstrap

Step 2: Import Angular Formly Module

Import the FormlyModule and FormlyBootstrapModule into your Angular module (typically AppModule):

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FormlyModule } from '@ngx-formly/core';
import { FormlyBootstrapModule } from '@ngx-formly/bootstrap';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    FormlyModule.forRoot(),
    FormlyBootstrapModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: Define Your Form Using JSON

In your component file (app.component.ts), define your form using JSON object:

import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormlyFieldConfig } from '@ngx-formly/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  form = new FormGroup({});
  model = { email: '', password: '' };
  fields: FormlyFieldConfig[] = [
    {
      key: 'email',
      type: 'input',
      templateOptions: {
        label: 'Email address',
        placeholder: 'Enter email',
        required: true,
      }
    },
    {
      key: 'password',
      type: 'input',
      templateOptions: {
        type: 'password',
        label: 'Password',
        placeholder: 'Password',
        required: true,
      }
    }
  ];

  onSubmit() {
    if (this.form.valid) {
      console.log('Form submitted:', this.model);
    }
  }
}

Step 4: Render the Form in Template

In your template file (app.component.html), render the form using formly-form component:

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Step 5: Styling

Optionally, you can include Bootstrap CSS to style your form. Install Bootstrap via npm:

npm install bootstrap

Then, import Bootstrap CSS into your styles.css file:

@import '~bootstrap/dist/css/bootstrap.min.css';

Step 6: Run Your Application

Run your Angular application:

ng serve

Open your browser and navigate to http://localhost:4200 to see your Angular Formly form in action.

Conclusion

Angular Formly is a powerful library that simplifies form creation in Angular applications by allowing you to define your forms using JSON objects. This tutorial covered the basic setup and usage of Angular Formly to create a simple form with email and password fields. You can further explore Angular Formly to handle more complex form scenarios, including form validation, custom form controls, and dynamic forms.