# Trailib

This library was generated with [Angular CLI](https://github.com/angular/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);
  }`