get started

Not fully working [TOC]

Introduction

How do you create a page to edit an piece of structured data? You create a form control for each property. And very likely, you would add validators to form control. Most of form controls are very similar to each other. So why can't these form controls be generated from data model specification?

This is what this library does. It generates the form controls from data model specification. With this library, you would not build your form controls from scratch, but through a configurable way.

NOTE: Currently, this library only supports Angular 2 projects, and is built on top of Angular2 Material.

Terminology

These are important terms to get started with this library.

• Entity : An object to model such as book, house, etc.

• Property: An entity has many properties. For example, book has author, ISBN number, etc. And here author is a Book entity's property. The same as ISBN number.

• Context: When an entity is edited, properties interact with each other in UI. These interaction rules are termed as a Context. Here are some examples:

  • Only show property B when property A's value is 5.
  • Disable property B when property A is checked.
  • Property B is required when A's value is 6.
  • Clear property B's value when A is checked.

• Form Control: Text input box, check box, drop down, Radio, Date Picker, etc.

Quick Start

This section would give you a brief idea of how to utilize this library in a high-level perspective.

Step 0: import dependency

Import DynamicFormModule from this library

Step 1: Define data model (Entity)

Here is an example:

new Entity(
      'test',
      [new Prop({
          name: 'prop3',
          type: 'checkbox',
          controlType: 'text',
          dataType: 'BOOLEAN',
          label: 'third Property',
        }),
        new Prop({
          name: 'prop4',
          type: 'text',
          controlType: 'text',
          dataType: 'STRING',
          label: 'fourth Property',
          isRequired: true,
          minLength: 5,
        }),
      ],
      [{
          type: ShowHideContext.TYPE,
          srcProp: 'prop3',
          srcValue: 'true',
          target: 'prop4',
          show: true
        }
      ]);

• This example defines test Entity.
• It has 2 properties and one context.
• The context specifies that showing prop4 when prop3 is checked, hiding prop4 otherwise.

Step 2: register data model(Entity) to entity Respository

@NgModule(...)
export class MyModule {
  constructor(entityMetaDataRepository:EntityMetaDataRepository){
    entityMetaDataRepository.registerMetaData(entity)
  }
}

You only do this once in your application.

Step 3 construct your page

 <form >
   <inst-editor entity="test" [inst]="inst"></inst-editor>
  </form>

Step 4 include default style in your index.html

One css file is provided by this library. This file defines default css layout and some convenient css classes. It is under src/lib/src/style.scss

Quick Start Examples

please check the demo application src/demo-app. It can be started as

ng serve