Angular6 formbuilder - Form Builder

• Getting started
• Roadmap
• API
• Custom styles
• Custom themes
• Exports
• Contributors
• Development

Warning

Library is under active development and may have breaking changes until stable 2.0.0 release or subsequent major versions after 2.0.0.

Getting started

Step 1: Install formbuilder

NPM

npm install --save @dotgov/formbuilder

Step 2: Import the component module

Consider that every DotGov Module including FormBuilder must be imported next/in same context as DGSCoreModule.

import { DGSCoreModule, DGSEnvironment } from '@dotgov/z_core';
import { FormBuilderModule } from '@dotgov/formbuilder';


const dgsEnvironment: DGSEnvironment = {
  debug: environment.debug,
  apiUrl: environment.apiUrl,
  defaultLanguage: {
    Name: 'English',
    Code: 'en',
    Icon: 'fa fa-globe',
  },
  languages: [{
      Name: 'English',
      Code: 'en',
      Icon: 'fa fa-globe',
    }],
  lowerCaseTranslates: true,
};

@NgModule({
  declarations: [AppComponent],
  imports: [
    DGSCoreModule.forRoot(dgsEnvironment),
    FormBuilderModule.forRoot(dgsEnvironment),
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 3: Include assets

To load assets like themes and pdf viewer its ncessary to include assets. IF you're using the Angular CLI, you can add this to your angular-cli.json. Note: Path to formbuilder bundle must set relative to basepath inside angular-cli.json.

"apps": {
    ...any,
    "assets": [
        ...any,
        {
          "glob": "**/*",
          "input": "../node_modules/@dotgov/formbuilder/assets/",
          "output": "./assets/"
        }
    ],
    ...any,
}

Step 3: Include a theme

For now library doesn't allow you to use a custom theme, but i will be avalaible soon. Keep in touch with us.

API

Inputs

Input	Type	Default	Required	Description
task	Task	-	yes	Initial process object
templateList	boolean	false	no	List of available templates.
activeTable	boolean	false	no	Active table.
availableModels	boolean	false	no	All available models

Outputs

Output	Type	Description
(reset)	FVDoneResponse	Fired when user click reset button.
(save)	boolean	Fired when use click save button.

Also you may communicate with FVNotificationService. Example:

import { FVNotificationService, FVNotification } from '@dotgov/formbuilder';

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less'],
})
export class AppComponent {
  constructor(
    private fvNotification: FVNotificationService,
  ) {
    this.fvNotification.subscription((notify: FVNotification) => {
      const allowedTypes = ['error', 'info', 'success', 'warning'];
      if (allowedTypes.indexOf(notify.type) !== -1) {
        this.handleNotification[notify.type](notify.message, notify.title);
      }
    });
  }
}

Contributors

Contributor Name	Contributor Page
Grigore Meleca	grigoreme

Development

Setup build path

Open ng-package.json and setup dest to location where you want your build to go. (example: ../myProject/node_modules/@dotgov/formbuilder)

Build

npm run build

For more information read docs/developer_guide.md

Release

Use CI/CD for that. Or just run npm run old_school_release, of course if you have permissions ;)