Package Exports

goteti-forms

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (goteti-forms) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Goteti Forms

Developer: Narasimha Goteti

"GotetiForms" library is for the Angular (2+) project development.

Bootstrap 3 (or later) version is required for this Package for existing styling.

Integration Steps:

Install package in the root folder using the command,

npm i goteti-forms

Add the module to the NgModule of main application.

import { GotetiFormsModule } from 'goteti-forms';
@NgModule({
declarations: [
    AppComponent
],
imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    GotetiFormsModule  // <--- Add the Module 
],
providers: [],
bootstrap: [AppComponent]
})

Module contains the following:

import {
    AtbrDirective, DebounceInputDirective, FilterPipe, GotetiAutoSelectComponent, GotetiFormsComponent, GotetiFormsModule, GotetiFormsService, GotetiInputFieldComponent, GotetiRecursiveFormControlComponent, GtMapBuilder, HighlightSearch, IpolatePipe, ListenerDirective, PermissionDirective, PermissionDirectiveDisable, SetFocusDirective, getValidatorsList
} from 'goteti-forms';

Details of all the Components / Pipes / Directives / Utils.

Component : GotetiInputFieldComponent

Info: Supports both Template driven and Reactive forms

Tag: <goteti-input-field [config]="config" [(ngModel)]="title">

Example:

[config] =  {
        "label": "Name",
        "type": "auto-select",  
        "class": "form-control",
        "multiple": true,
        "listValue": "company",
        "itpolate": "My name is {name} and I work in {company} !",
        "list":[{"name":"Narasimha","company":"Goteti"},
                {"name": "Mounica","company": "Vutukuru"}],
        "atbr": {
          "placeholder": "It's upto you! "
        },
        "errors":{
            "required":{
                "msg": "Name is required",
                "class": "text-warning"
            }
        },
        "validations": [{
          "key": "minLength",
          "value": 5
        },{
          "key": "required",
          "value": 5
        }]
      }

Attributes of [config]:

Attributes	Description	Values Supported / Example
label	Label for Input field	String , null
class	Class for the Input field	ex: 'form-control classname'
value	Value of input
type	All basic input types additional to Library input types i.e (auto-select, fnumber), This DOES NOT support select	auto-select, fnumber, textarea, text, number and (all input types)
multiple	'true' for multi-select , 'false' for single select. multiple true works only for type='auto-select'.	true / false
listValue	type="auto-select" selected value should be property or whole selected object of array iteration	Property key or null
itpolate	type="auto-select", It is string with {key} ,format of displaying data in dropdown.	'My name is {name} and I work in {company} !'
list	type="auto-select", Array of list for dropdown	Array of objects, Array of non-objects
atbr	Attributes for input field	ex: {step: 10}
random	Random number has to be updated when ever atbr value is updated inorder to rerender the component	Math.random()
errors	Error messages which displays in input field
validations	Validation object value for Reactive form

Licence

Open Source - Free to use.