!alt text

Create dynamic forms in Angular quickly and effortlessly


This package simplifies Angular form creation with full Angular reactive capabilities by offering a straightforward class configuration. It leverages Angular Material, utilizing material themes for enhanced functionality.

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 4.
3. You also need to install peer dependencies. Installing npm peer dependencies.
4. Setup angular material in your project. Getting started guide.
5. Import BrowserAnimationModule in app.module.ts.
``javascript
// ... Other imports
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
imports: [
...,
BrowserAnimationsModule
],
...,
})
export class AppModule { }
`
6. Import FormLibModule from ngx-form-lib and add it into the imports array of your module.
`javascript
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 {}
`

7. 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.
`javascript
import { ParentConfig, Input, Field, Config } from "ngx-form-lib";

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


8. Bind the configuration with config property of ngx-for-lib component.
`html

`

$3

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

$3

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

Features and releases

$3

1. Dynamic components
2. Field Dependencies
3. Facets implementations (hidden, disable, set value)

$3

1. Form dependencies

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`.