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

NOTE: This document update is still In-Progress as I need to cover details of all the components.

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

1) Component : GotetiInputFieldComponent

// Supports both Template driven and Reactive forms

//app.component.html 
    
    <goteti-input-field 
        [config]="configuration" 
        [listen]="{input: onInputValue, change: onChangeValue}"
        [(ngModel)]="title" required>
    </goteti-input-field>

//app.component.ts
ngOnInit(){
    this.configuration =  {
            "label": "Name",
            "type": "auto-select",  
            "class": "form-control",
            "multiple": true,
            "listValue": "company",
            "disable": false,
            "hide": false,
            "itpolate": "My name is {name} and I work in {company} !",
            "list":[{"name":"Narasimha","company":"Goteti"},
                    {"name": "Mouni","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
            }]
          };        

}

onInputValue(event){
    console.log(event)
}

onChangeValue(event){
    console.log(event)
}

Properties of [config]:

Properties	Description	Values Supported / Example
label	Label for Input field	String , null
class	Class for the Input field	ex: 'form-control classname'
disable	If it is 'true', input will be in disable state , Even modifing the attributes from developer tools (inspect elements ) will not work i.e still input field will be disable state	true / false
hide	It is NOT CSS based it is *ngIf based.	true / false
value	Value of input
type	All basic input types additional to Library input types i.e (auto-select, fnumber), This DO NOT support 'select' type.	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 Objects or Array of non-objects 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 update the Input field's attribute.	Math.random()
errors	Error messages which displays in input field
validations	Validation object value for Reactive form

Properties of [listen]:

listen attribute accept the object with key and value, where key is valid input events like 'input','change','keydown'... etc , value is the function which needs to handle in '.ts' file.

Licence

Open Source - Free to use.