ngx-form-lib v0.2.0

Build dynamic form in Angular, easy and fast.

This project let you create different angular forms with all the features of angular reactive by providing basic class configuration. It user angular materials under the hook taking advantage of material themes.

Homepage

Configure your form directly on NgxFormLib or play with forms on Stackblitz

Installation

1. In your angular project run command npm install --save ngx-form-lib and install the package.
2. This library use Angular material for themes. So, if you have already setup Angular material skip step 3.
3. You also need to install peer dependencies. Installing npm peer dependencies.
4. Setup angular material in your project. Getting started guide.
5. Import FormLibModule from ngx-form-lib and add it into the imports array of your module.

import { NgModule } from '@angular/core';
import { FormLibModule } from 'ngx-form-lib';

import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [HomeComponent],
  imports: [
    CommonModule,
    FormLibModule,
  ],
})
export class HomeModule {}

6. Create a constant file with form configuration. You can directly create form configuration on NgxFormLib webpage and use it in your projects. IDE support will provide with autofill for various properties.

import { ParentConfig, Input, FormField, FormConfig } from "ngx-form-lib";

export const CONFIG: FormConfig = {
    header: 'Form Header',
    parentConfig: new ParentConfig({
      appearance: 'fill',
      color: 'primary',
    }),
    sections: [
      {
        sectionHeader: 'Section Header',
        fields: [
          new Input({
            subType: 'text',
            field: new FormField({
              type: 'input',
              name: 'money',
              label: 'Enter your name',
              order: 1,
              classes: ['ngf-col-12'],
            }),
          }),
        ],
      },
    ],
  };

7. Bind the configuration with config property of ngx-for-lib component.

<ngx-form-lib [config]="CONFIG"></ngx-form-lib>

List of supported component

1. Input
2. Textarea
3. Checkbox
4. Radio
5. Button

Style error fix

If you find breaking style with material form just install peer dependencies manually and rerun the project.

Next major version release

1. Field dependencies
2. Form dependencies
3. Facets (hidden, disable, set value)

Further help

To get more help, issues or any suggestions for the ngx-form-lib mail to navdeep.dev2510@gmail.com with subject ngx-form-lib.