NgxForm

Angular 2+ form components

Installation

1. Use npm to install the package...

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

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

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

Dynamic Form component

Renders dynamic form

Usage

// 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: []
  }]
};

<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

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

How to add custom form controls

1. Create a component which implements ControlValueAccessor
2. Add your component to NgxFormModule:

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:

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

@@ TO-DO List

• Set Recaptcha SiteKey via props. At the current time we set Recaptcha SiteKey in reCaptcha config in ngx-form.module file.