ndm

ng-dynamic-master-forms

A dynamic approach to displaying lists and building forms.

Showing:

Popularity

Downloads/wk

46

Maintenance

No Maintenance Data Available

Package

Dependencies

19

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

ng-Dynamic-Master-Forms

by (R)Dev rdev1163@outlook.com updated 7/1/2017
v 1*

This is an Angular 2+ module for making forms from any object given to it. It reads the properties and builds another array of questions with object properties and respective values and initialized controls you would need for an Angular Form. It also has various input components that are reusable for building forms manually and implement undo state management (Redux Patterns).

To Install,

using NPM

npm i --save ng-dynamic-master-forms
    

Then just add the DynamicMasterFormsModule to your ngModule imports

imports: [
    DynamicMasterFormsModule
]    

Reusable Componentes

Each component is autonomous, controls are not needed but can be overwritten.

<single-line-text-input-component label="Label" [(model)]="singleText" placeholder="placeholder" [control]="singleDemoControl" ></single-line-text-input-component>
<multi-line-text-input-component label="Label" [(model)]="multiText" placeholder="placeholder" [control]="multiDemoControl" ></multi-line-text-input-component>
<single-line-text-input-undo-component label="Label" [(model)]="singleUndoText" placeholder="placeholder" [control]="singleDemoControl" ></single-line-text-input-undo-component>
<multi-line-text-input-undo-component label="Label" [(model)]="multiUndoText" placeholder="placeholder" [control]="multiDemoUndoControl"></multi-line-text-input-undo-component>

Form Building Services

The list builder will return an array of each key in the object with initialized controls and properties to help build the input like key and label.

const MyObject = {
    foo: 'foo',
    bar: 'bar',
    bas: 'bas'
}
constructor(
    private formsService: FormsService,
){};
const QUESTIONS_LIST = this.formService.buildList(MyObject);

Dynamic Editable Master Details List

This component can be inserted into templates and takes an array of object(s) and will turn it into a master-details list, it will emit an object (onChanges) that contains {objectIndex: number, key: string, value: any}

<master-details-list-component [items]="[demoObj, demoObjTwo]" (onChanges)="onChange($event)"></master-details-list-component>

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100