Trailib

This library was generated with Angular CLI version 7.2.0.

Install

Run npm i trailib to install a trailib to your project.

import

import { TrailibModule } from 'trailib';

Note: Add this to app module file.

latest DOcs

HTML

Include this to your html file

<lib-dynamicform [country]="'us'" (TheDynamicForm)="RegisterClient($event)"></lib-dynamicform>.

supported countries 'india' or 'us'. default us

Npm will automatically genrated form with validations.

Oldversiondoc

up to version 1.0.5

HTML

Include this to your html file

<lib-dynamicform [dataObject]="dataJson" [FormProperties]="formproperties" (TheDynamicForm)="RegisterClient($event)"></lib-dynamicform>.

DataStructure

dataObject is an json input

`dataJson = {

First Name: {
  value: '',
  type: 'text',
  placeholder: 'First Name',
  validation: {
    custom: ValidateName
    required : true,
    min : 8,
    max  : 50
  },
  errormessage: 'Please enter valid First Name',
  maxlength: '10'
}

};`

you can add as many fields as you want

type is type of your feild

supported types as of now: text,radio,checkbox,select,email.

for select,checkbox,radio

add options to your dataJson, options is a array of json. eg options : [ { value: '', text: '--select--', } , { value: '1', text: 'male', } , { value: '2', text: 'female', } ] value holds the actual value of the (checkbox\select\dropdown. and text holds the display text i.e visible to the end user.

placeholder is the place holder for your input

validation is a json and required is a mandatory boolean field . set it as false for optional inputs

min and max are optional columns.

custom is where you add your own custom validation using abstract control.

just give the function as input to the custum key and make sure you set the error name as { IsHavingErr: true}

error message is your custom error message.

maxlength is to restrict max length.

FormProperties is a json input

eg FormProp = { FormCaption: 'Register', ButtonValue: 'Register' };

formcaption is your form heading.

button value is your button text.

TheDynamicForm give the form output

it will the total form as output

your store the value like this

eg RegisterClient(RegisterFormFG: FormGroup) { console.log(RegisterFormFG.value); }