Skip to main content

Quick Start

Follow these steps to get started with Ngx Formly. Also check out our demos for further examples.

1. Install Formly packages:

  • Installing with ng add (recommended):

    ng add @ngx-formly/schematics --ui-theme=bootstrap
    • ui-theme: is an optional flag which allows choosing the UI theme to install along with the core package; choose one of the following themes:
      • bootstrap
      • material
      • ng-zorro-antd
      • ionic
      • primeng
      • kendo
      • nativescript
  • Installing with npm:

    npm install @angular/forms @ngx-formly/core @ngx-formly/bootstrap --save
    • replace bootstrap with one of the following available themes: material, ionic, primeng, kendo, nativescript.

    Once installed, FormlyModule will be imported in the AppModule:

import { AppComponent } from './app.component';
+ import { ReactiveFormsModule } from '@angular/forms';
+ import { FormlyModule } from '@ngx-formly/core';
+ import { FormlyBootstrapModule } from '@ngx-formly/bootstrap';

imports: [
+ ReactiveFormsModule,
+ FormlyModule.forRoot(),
+ FormlyBootstrapModule
export class AppModule { }

The forRoot() call is required at the application's root level. The forRoot() method accepts a config argument where you can pass extra config, register custom field types, wrappers, extensions and validation.

2. add <formly-form> inside the form tag to your AppComponent template:

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

The <formly-form> component is the main container of the form, which will build and render form fields, it accept the following inputs:

  • fields: The field configurations for building the form.

  • form: The form instance which allow to track model value and validation status.

  • model: The model to be represented by the form.

    For more details check Properties and Options.

3. Configure our defined form:

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

selector: 'app',
template: `
<form [formGroup]="form" (ngSubmit)="onSubmit(model)">
<formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
<button type="submit" class="btn btn-default">Submit</button>
export class AppComponent {
form = new FormGroup({});
model = { email: '' };
fields: FormlyFieldConfig[] = [
key: 'email',
type: 'input',
props: {
label: 'Email address',
placeholder: 'Enter email',
required: true,

onSubmit(model) {

That's it, the above example will render an email input that is marked required and filled with '' value.

From there, it's just JavaScript. Allowing for DRY, maintainable, reusable forms.

To learn more, check out the Formly @eggheadio course 🔥 by Juri Strumpflohner (Twitter - Blog).