Gbxsoft-form NPM

GbxsoftForm

Library created from GBXSoft with Angular 9.0 CLI Supported with Angular 9+ version

Getting started

1. Implement required modules

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { GbxsoftFormModule } from 'gbxsoft-form';

@NgModule({
  imports: [
    CommonModule,

    //1. Import next 2 modules to have your Form work
    FormsModule,
    ReactiveFormsModule,

    //2. Import GbxsoftFormModule
    GbxsoftFormModule,
  ],
})
export class AppModule {}

Import styles to SCSS file

@import '~gbxsoft-form/styles/gbxsoft-form.scss';

2. Usage

2.1 Gbxsoft Input

this.nameConfig = { name: 'Firstname', type: 'text', placeholder: 'Write name' };
this.name = new FormControl();

<gbxsoft-input [formControlName]="name" [config]="nameConfig"></gbxsoft-input>

Options @Input(config) Base input configuration | Config params | type | required | | ------------- |:-------------:|:-------------:| | name | string | ✖ | | type | string | ✖ | | placeholder | string | ✖ |

2.2 Gbxsoft Daterangepciker

Firstly, you need to install next Libraries to your project globally Jquery, moment, daterangepicker

npm install @types/jquery jquery moment daterangepicker --save-dev

Secondly, update every tsconfig.ts with new type

{
  "compilerOptions": {
    "types": ["jquery"]
  }
}

Thirdly, find scripts in angular.json and paste next imports from node_modules

"scripts": [
  "node_modules/jquery/dist/jquery.slim.js",
  "node_modules/moment/moment.js",
  "node_modules/daterangepicker/daterangepicker.js"
]

2.2 Gbxsoft Select

this.select = new FormControl();
this.data = [
    {
        id: 1,
        text: 'January'
    },
    {
        id: 2,
        text: 'February'
    },
    {
        id: 3,
        text: 'March'
    }
]

this.config: GbxsoftSelectConfig = {
    id: 'id', //Define here the name of id that will be used in your model
    label: 'text' //Define here the label that will be used in your model
}

//Example of single option set programatically
//1. Use `setValue`
//2. Insert full model that exists in options
this.select.setValue({id: 1, text: 'January'});

//Example of multiple option set programatically
//1. Use `setValue`
//2. Prepear multiple options
const options = [{id: 1, text: 'January'},{id: 3, text: 'March'}]
//3. Insert existed options in options
this.select.setValue(options);

<gbxsoft-select [formControl]="select" [options]="data" [config]="config"> </gbxsoft-select>

Options @Input(options) Array of options customizable | Config params | type | required | | ------------- |:-------------:|:-------------:| | id | string | ✖ | | text | string | ✖ | Params in that table are default and can be customized with different naming in config

Options @Input(config) : GbxsoftSelectConfig | Config params | type | description | default | | ------------- |:-------------:|:-------------|:-------------:| | id | string | Here you can name the key of id element of your option | id | | label | string | Here you can name the key of label/text element of your option | text | | notFoundText | string | Update not found text | No results found... | | placeholder | string | Update placeholder | Select item... | | searching | boolean | On/Off searching | false | | multiple | boolean | Should select multiple items | false | | allowClear | boolean | Allows clearing select with x sign | false | | closeOnClear | boolean | Should select be closed when value is cleared | false | | closeOnSelect | boolean | Should select be closed when value is selected | false | | debounceTime | number | Throttle time of search | 300 | | addTag | boolean | Allows adding custom elements to existing list when no item found | false | | enableUnselect | boolean | Enable/disable unselecting item | false |