Special-forms NPM

Angular library to create complex forms with a simple config object.

🏠 Homepage

Install

yarn add special-forms

Author

👤 Santiago López

Github: @LopezSantiago
LinkedIn: @https:\/\/www.linkedin.com\/in\/lopezsantiagowebui\/

Instructions

import { SpecialFormModule } from 'special-forms';

@NgModule({
  ...
  imports: [
    SpecialFormModule
  ],
  ...
})

In the component

import { SpecialFormBuilderService } from 'special-forms';
@Component({
  ...
})
export class SomeComponent implements OnInit {

  constructor(private specialBuilder: SpecialFormBuilderService) {}

  form = this.specialBuilder.group({
    test: {
      type: EControlTypes.input,
      label: 'Esto es una prueba',
      placeholder: 'Un placeholder',
    },
  });
}

To create a new Form only pass the config Object

  interface {
    placeholder?: string;
    label?: string;
    tooltip?: string;
    icon?: string;
    elementId?: string;
    styleClasses?: string;
    length?: number;
    required?: boolean;
    hidden?: boolean;
    readOnly?: boolean;
    disabled?:boolean;
    errorMessages?: { [key: string]: string };
    validators?: ValidatorFn | ValidatorFn[] | null;
    asyncValidators?: AsyncValidatorFn | AsyncValidatorFn[] | null;
    defaultValue?: any;
    settings: //depends of the type of control selected;
  }

 enum EControlTypes {
  pkey = 'PRIMARY-KEY',
  input = 'INPUT',
  richText = 'RICH-TEXT',
  textArea = 'TEXT-AREA',
  dropdown = 'DROPDOWN',
  date = 'DATE',
  time = 'TIME',
  checkbox = 'CHECKBOX',
  upload = 'UPLOAD',
  autocomplete = 'AUTOCOMPLETE',
  multiple = 'MULTIPLE-AUTOCOMPLETE',
  array = 'ARRAY',
  form = 'FORM',
  label = 'LABEL',
  default = 'DEFAULT',
}

Example

  form = this.specialBuilder.group({
    name: {
      type: EControlTypes.input,
      label: 'Name',
      placeholder: 'Write your first name',
      validators:[Validators.maxLength(20)],
      defaultValue:'Jhon Doe',
      disabled:false,
      elementId:'name-input',
      errorMessages:{
        maxLength:'The maximum length is 20'
      },
      required:true,
      type: EControlTypes.input,
    },
  });

Finally you can pass the form object to the component.

  <sp-form [control]="form"></sp-form>

To the correct functionality of the library, need to install the next libraries

    "tailwindcss": "^3.2.7",
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.21",
    "@ngneat/input-mask": "6.1.0",
    "inputmask": "^5.0.7",
    "ngx-dropzone": "^3.1.0",
    "ngx-editor": "^15.2.0",
    "@angular/material": "15.1.5"