# ii-ngx-form

> Angular 2+ form components

Latest version **1.14.7** (published 2021-07-23) · 0 weekly downloads

## Install

```sh
npm install ii-ngx-form
pnpm add ii-ngx-form
yarn add ii-ngx-form
bun add ii-ngx-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.14.7 |
| Published | 2021-07-23 |
| First published | 2020-11-28 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 836.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | ildar-icoosoft |

## Links

- npm: https://www.npmjs.com/package/ii-ngx-form
- npm.io page: https://npm.io/package/ii-ngx-form

## Dependencies (4)

- [ajv](https://npm.io/package/ajv.md) 7.0.0
- [tslib](https://npm.io/package/tslib.md) ^2.0.0
- [ng-recaptcha](https://npm.io/package/ng-recaptcha.md) ^6.1.0
- [ii-ngx-common](https://npm.io/package/ii-ngx-common.md) ^1.7.33

## Recent versions

- 1.14.7 (latest) — 2021-07-23
- 1.14.6 — 2021-07-22
- 1.14.5 — 2021-07-21
- 1.14.4 — 2021-07-21
- 1.14.3 — 2021-07-21
- 1.14.2 — 2021-07-21
- 1.14.1 — 2021-07-20
- 1.14.0 — 2021-07-20
- 1.13.1 — 2021-07-07
- 1.13.0 — 2021-07-06
- 1.12.0 — 2021-07-05
- 1.11.0 — 2021-07-04
- 1.10.2 — 2021-07-02
- 1.10.1 — 2021-07-02
- 1.10.0 — 2021-07-01
- … 84 more at https://npm.io/package/ii-ngx-form/versions

## README

# NgxForm

Angular 2+ form components

## Installation

1. Use npm to install the package...

```terminal
$ npm install ii-ngx-form --save
```

2. You could either add into your module `imports` the `NgxFormModule` in order to add all of the components.

```typescript

import { NgxFormModule } from "ii-ngx-form";

@NgModule({
 // ...
 imports: [
   // ...
   NgxFormModule
 ]
})

```

## Dynamic Form component

Renders dynamic form

### Usage

```typescript

// component ts

const formData: DynamicFormData = {
  items: [{
    label: 'Email',
    name: 'email',
    type: 'email',
    options: [{
      name: 'placeholder',
      value: 'enter your email'
    }],
    items: []
  }, {
    label: 'Password',
    name: 'password',
    type: 'password',
    options: [{
      name: 'placeholder',
      value: 'enter your password'
    }],
    items: []
  }]
};
```

```terminal
<ii-dynamic-form
   [formData]="formData" 
   [initialValues]="{email: '', password: '', someDate: '2019-12-30T13:50:00.061Z'}"
   (submit)="handleSubmit($event)"
/>
```

## Input component

Renders HTML `<input>` component

### Usage

```terminal
<ii-input [(ngModel)]="value" />
```

## How to add custom form controls

1. Create a component which implements [ControlValueAccessor](https://angular.io/api/forms/ControlValueAccessor)
2. Add your component to NgxFormModule:

```typescript
import { NgxFormModule } from "ii-ngx-form";

@NgModule({
 // ...
 imports: [
  // ...
  NgxFormModule.forRoot({
   'fields': {
    'some-new-component': {
     component: SomeNewComponent
    }
   }  
  })
 ]
})
```

Then you can use this Connect form data with this type:

```typescript
const formData: DynamicFormData = {
  items: [{
    label: 'Label',
    name: 'name',
    type: 'some-new-component',
    options: [],
    items: []
  }]
};
```

@@ TO-DO List
- Set Recaptcha SiteKey via <ii-dynamic-form> props. At the current time we set <ii-dynamic-form> Recaptcha SiteKey in reCaptcha config in ngx-form.module file.

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