ngx-form-model

Demo

https://edriang.github.io/ngx-form-model/dist-demo/

Installation

To install this library, run:

$ npm install ngx-form-model --save

Important: Also check that listed peerDependencies on package.json are installed into your project

Dependencies

• For boolean (checkbox), radio and radio-group inputs: icheck-bootstrap

  • Requirement: include icheck-bootstrap.css in your assets

• For datepicker input: ng-bootstrap

• For select: ngx-select-autocomplete

Description

This module provides a <form-control> component that can be used to represent different types of inputs, ie: text, textarea, checkbox, radio, date, select, etc

<form-control> configuration is defined in a class that extends FormModel.

FormModel represents a model in the perspective of a form, in which each field declared will then be mapped to some model.

FormModel declares one or more properties that you can configure with the properties defined in FormControlConfiguration, like label, validators, placeholders, input type, input params, etc

This module is intended to be used with the ReactiveFormsModule of angular. When you create a new form using FormModel.createForm() method you are actually creating a new FormGroup instance.

Then, in your view you have to bind that FormGroup to some form using the angular [formGroup] binding.

When you use <form-control> you will need to pass a reference to the [form], to the FormModel instance through [model] binding, and the name of the field that this <form-control> component will be bound to. This name is also important to know which FormControlConfiguration use to create the control.

Input controls are declared under /inputs folder. There is a generic InputControlComponent that must be extended by each new InputControl**Component.

Which InputControlComponent would be loaded by <form-control> component is defined by the type property of FormControlConfiguration. Then, using the value of type there is a switch/case mapping defined in FormConfigurationService.

If you need to overwrite some mappings or add new types, you will need to provide your own FormControlConfiguration implementation. For example in your module providers config:

{provide: FormConfiguration, useClass: CustomFormConfiguration}

Then, CustomFormConfiguration is a service declared in your module that will extend FormConfiguration and overwrite/extend any method. For example:

import { Injectable, Type } from '@angular/core';
import { FormConfiguration, InputControlComponent } from 'ngx-form-model';

@Injectable()
export class CustomFormConfiguration extends FormConfiguration {

    getControlType(type:string):Type<InputControlComponent> {

        //Example of overriden control configuration
        switch(type){
            case 'date': //Overwrite existing component
                return CustomInputControlDateComponent;
            case 'datetime': //Declare new component type
                return CustomInputControlDatetimeComponent;
            default: //Return super/default config
                return super.getControlType(type);
        }
    }
}

Important: all the input controls configured are loaded dynamically, so each control component need to be defined in the entryComponents param of the FormModelModule module configuration.

If you will provide custom input controls through CustomFormConfiguration, then you will need to provide those components using the ANALYZE_FOR_ENTRY_COMPONENTS provider. More info (here)[https://angular.io/api/core/ANALYZE_FOR_ENTRY_COMPONENTS]

Although, this module offers an easy way to register custom entry components through FormModelModule.forRoot(custom_components:any[]) method, which receives an array of components to automatically register in ANALYZE_FOR_ENTRY_COMPONENTS.

To create a new FormModel you will need to declare a new class that extends this one.

To configure each form control (FormControlConfiguration) you can use @formControlConfig({}) decorator. For example:

@formControlConfig({
    type: 'text',
    help_text: 'Help text for this component',
    placeholder: 'Placeholder text'
    validators: [Validators.required, Validators.minLength(4), Validators.maxLength(10)],
    error_messages: {
        minlength: 'Your custom message'
        //Ej con observable: minlength: Observable.of('Your custom message')
        //Ej con Promise: minlength: Promise.resolve('Your custom message')
    },
    params: { //Use params to configure params that are passing to InputControlComponent

    }
})
name:string;

Remember that decorators are executed in compilation time, so you cannot access any class instance value. So, for example, you can't access injected services.

In this cases you can use (in constructor) this.setField(field_name:string, config:FormControlConfig) instead of using '@formControlConfig' decorator, or overwrite some params using this.setFieldParam(field_name:string, param_prop:string, param_value:any);. NOTE: Currently you can only overwrite params key of FormControlConfig in this way.

Usage

See Demo project, under src/app folder

Run demo locally

$ npm run start

Development notes

• Lib sources are under src/lib
• Demo sources are under src/app

Important: The sources to be packaged and compiled are the ones listed in src/lib/index.ts or any of its dependencies

To create dist-lib bundle (dist of the lib app) run:

$ npm run build-lib

To create dist-demo bundle (dist of the demo app) run:

$ npm run build

To publish cd dist-demo and npm publish

Important: this project uses two package.json files. One, in the root folder, is for defining dependencies to run and build the code and else dependencies used by the demo project. Dependencies of the lib must be configured under src/lib/package.json as well as info of the lib itself (name, version, etc)

License

MIT © Adrian Gallardo