# @gisgo/dynamic-form

> This Angular library make form creation easy.

Latest version **1.0.1** (published 2022-02-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @gisgo/dynamic-form
pnpm add @gisgo/dynamic-form
yarn add @gisgo/dynamic-form
bun add @gisgo/dynamic-form
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2022-02-22 |
| First published | 2022-02-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 316.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Bilel DHAOUADI |
| Maintainers | bilel.dhaouadi |
| Keywords | Angular, form, dynamic, form |

## Links

- npm: https://www.npmjs.com/package/@gisgo/dynamic-form
- npm.io page: https://npm.io/package/@gisgo/dynamic-form

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2022-02-22

## README

# Gisgo Dynamic Form

Gisgo Dynamic Form is a dynamic (JSON powered) form library for Angular that bring unmatched maintainability to your application's forms.


## Install

Run `npm install @gisgo/dynamic-form`

## Import Module

After installing the library, go to the `AppModule` or sub-module and run import `DynamicFormModule.forChild()`
```typescript
import {DynamicFormModule} from '@gisgo/dynamic-form';

@NgModule({
  declarations: [],
  imports: [
    DynamicFormModule.forChild()
  ]
})
export class AppModule { }
```

## Use Dynamic Form

To generate your form you need to define your list of fields:

```typescript
public fields FieldConfig[] = [
  {
    component: 'input-field',
    attribute: 'login',
    type: 'text',
    label: 'Login',
    placeholder: 'Enter your Login',
    value: '',
    validation: [Validators.required]
  },
  {
    component: 'input-field',
    attribute: 'password',
    type: 'password',
    label: 'Password',
    placeholder: 'Enter your password',
    validation: [Validators.email]
  },
];
```

in your component html file use `gisgo-dynamic-form` directive:

```html
<gisgo-dynamic-form [fields]="fields" (submit)="submit($event)"></gisgo-dynamic-form>
```

## Import Module with custom fields

```typescript
import {DynamicFormModule} from '@gisgo/dynamic-form';

@NgModule({
  declarations: [],
  imports: [
    DynamicFormModule.forChild({
      'custom-field': CustomFieldComponent
    })
  ]
})
export class AppModule { }
```

---
_Source: https://npm.io/package/@gisgo/dynamic-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._