Skip to content

ngx-formly-designer is an Angular module that adds Components to design forms for Ngx Formly.

License

Notifications You must be signed in to change notification settings

franzeal/ngx-formly-designer

Repository files navigation

ngx-formly-designer

A formly form to design Ngx Formly forms.

The current version is basic and intended for use with bootstrap. Feel welcome to issue feature requests or submit PRs.

Quick Start

Follow these steps to get started with Ngx Formly Designer. Also check out the demo for an example.

1. Install the ngx-formly-designer package:

  npm install ngx-formly-designer --save

2. Define the designer config:

import {DesignerConfigOption} from 'ngx-formly-designer';

export const designerConfig: DesignerConfigOption = {
  types: [
    {
      name: 'checkbox',
      fields: [
        {
          key: 'templateOptions.label',
          type: 'input',
          templateOptions: {
            label: 'label'
          }
        },
        {
          key: 'defaultValue',
          type: 'checkbox',
          templateOptions: {
            label: 'default value'
          }
        }
      ]
    },
    ...
  ],
  wrappers: [
    {
      name: 'expander',
      fields: [
        {
          key: 'templateOptions.label',
          type: 'input',
          templateOptions: {
            label: 'label'
          }
        },
        {
          key: 'templateOptions.expanded',
          type: 'checkbox',
          templateOptions: {
            label: 'expanded'
          },
          defaultValue: true
        }
      ]
    },
    ...
  ]
};

3. Import the FormlyDesignerModule:

import {NgModule} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {FormlyModule} from '@ngx-formly/core';
import {FormlyBootstrapModule} from '@ngx-formly/bootstrap';
import {designerConfig} from './designer-config';

@NgModule({
  imports: [
    ...,
    ReactiveFormsModule,
    FormlyModule.forRoot(),
    FormlyBootstrapModule,
    FormlyDesignerModule.forRoot(designerConfig)
  ],
})
export class AppModule {}

4. Use the formly-designer within your component:

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

@Component({
  selector: 'app',
  template: `
    <formly-designer [(fields)]="fields">
    </formly-designer>
  `,
})
export class AppComponent {
    fields: FormlyFieldConfig[] = [];
}

About

ngx-formly-designer is an Angular module that adds Components to design forms for Ngx Formly.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published