NgInputs

This library was generated with Angular CLI version 11.2.3.

Installing

npm install --save @douglas-serena/ng-inputs

// Or with yarn

yarn add @douglas-serena/ng-inputs

Quickstart

Import ng-inputs module in Angular app.

With default mask config options

import { NgModule } from '@angular/core';

import { NgInputsModule } from '@douglas-serena/ng-inputs';

@NgModule({
  imports: [
    NgInputsModule,
  ],
})

Passing in your own mask config

import { NgModule } from '@angular/core';

import { NgInputsModule, INgInputConfig } from '@douglas-serena/ng-inputs';

const config: INgInputConfig = {
  currency: { prefix: '$' },
  percent: { suffix: '%' },
  environments: {
    debug: false,
    url: 'localhost:5000/search' // Variable used in components like search
  },
  field: {
    alignIcons: 'left', // Align is set to defautl for all icons if it doesn't get past
    /**
     * the icons are defined with the type that is passed in the
     * input being able to make custom types,
     * if not enough * native html will be changed
     * to text
     */
    icons: {
      currency: {
        align: 'left',
        clickable: true,
        icon: 'fas fa-dollar-sign'
      }
    },
    type: 'group' // fields: 'group' | 'floating'/ options used only in the bootstrap
  },
  theme: 'bootstrap' // Themes: 'bootstrap' | 'materialize'
}

@NgModule({
  imports: [
    NgInputsModule.forRoot(config),
  ],
})

Currency and percentage settings

const configCurrencyAndPercent = {
  prefix: "$",
  align: "left",
  allowNegative: false,
  cursor: "end",
  decimalSeparator: ".",
  suffix: "  ",
  thousandsSeparator: ",",
};

Use

All inputs are used with Reactive Form and already offer it, without needing to import ReactiveFormsModule and FormsModule

NgInputModule

dss-input

<dss-input
  label="password: "
  placeholder="password"
  formControlName="password"
  field="floating"
  [disabled]="true"
  [readonly]="true"
  [name]="password-id-custom"
  [errors]="{ required: 'Errro' }"
  [cols]="{default: 12,lg: 6,md: 9,sm: 12}"
  type="password"
  alignIcon="left"
  alignText="right"
  [hideEye]="true"
  [icon]="fas fa-dollar-sign"
  [iconClickable]="true"
  [iconImage]="https://malcoded.com/static/8c48d4c4bb8b1f2793fa9c6536dae7c6/ba299/angular-reactive-forms-tutorial.png"
  [alignIcon]="left"
  [mask]="0000000/00000|0000000000/0000000"
></dss-input>

• Name is used in case of conflict of the id which is automatically defined by taking the name of the formControlName

types with mask or custom:

• currency: the currency type has predefined settings that can be customized in the import settings in the app

• percent: the percent type has predefined settings that can be customized in the import settings in the app

• password: Password already has an eye icon with the option to show password

• masks:

  • zipCode: "00000-000"
  • cpf: "000.000.000-00"
  • cnpj: "00.000.000/0000-00"
  • cpf_cnpj: "000.000.000-00" | "00.000.000/0000-00"
  • rg: "00.000.000-0"
  • estadual: "00.0.000.0000000-0"
  • rg_estadual: "00.000.000-0" | "00.0.000.0000000-0"
  • tel: "(00) 0000-0000" | "(00) 0 0000-0000"

dss-text-area

<dss-text-area
  label="description: "
  placeholder="description"
  formControlName="description"
  field="floating"
  [disabled]="true"
  [readonly]="true"
  [name]="description-id-custom"
  [errors]="{ required: 'Errro' }"
  [cols]="{default: 12,lg: 6,md: 9,sm: 12}"
  [rows]="2"
  [length]="300"
></dss-text-area>

NgSelectModule

dss-select

<dss-select
  label="State: "
  formControlName="state"
  [optionDefault]="{label: 'Select client', value: '', hide: true}"
  [options]="clients"
  [path]="{'people.name': 'people.id'}"
  [disabled]="true"
  [readonly]="true"
  [name]="password-id-custom"
  field="floating"
  [errors]="{ required: 'Errro' }"
  [cols]="{default: 12,lg: 6,md: 9,sm: 12}"
></dss-select>

• options: use if it is not defined as a standard object {label: '', value: ''}
• path: use if it is not defined as a standard object {label: '', value: ''}
• optionDefault: use if it is not defined as a standard object {label: '', value: ''}

dss-search

<dss-search
  type="search"
  label="search: "
  placeholder="search"
  alignIcon="left"
  alignText="right"
  [disabled]="true"
  [readonly]="true"
  field="floating"
  [value]="valueStart"
  pathLabel="people.name"
  uri="{url}/client/name/{value}"
  responseData="data"
  return="pessoa.id"
></dss-search>

• return
• value
• pathLabel
• uri
• responseData

NgCheckboxModule

Errors

the errors are rendered with the type that is defined in the ReactiveFormsModule

References