Mini Form AngularJS 4 Component

This component can be used to create simple forms dynamically.

It uses the reactive form approach, by passing a model for the form generation and receiving a similar model back when the form is successfully submitted. The styling is done using Bootstrap 3.

Setup

You have to import FormsModule and ReactiveFormsModule and put them in the imports part of your @NgModule declaration in app.module.ts.

import {FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  ...
 imports: [
    FormsModule,
    ReactiveFormsModule,
  ...

You would also have to import the MiniFormComponent and put it in the declarations of your @NgModule

import { MiniFormComponent } from './lib/mini-form/component/mini-form.component';

@NgModule({
 declarations: [
    MiniFormComponent,
    ...

Usage

All you have to do is implement the IMiniFormModel interface for your class to be a valid model for the Mini Form component. You would have to implement the getFormFields method.

This one returns an array of MiniFormField objects, which are used to create the form elements Example of model passed to the mini form component (1 field form):

export class MyAccountModel implements IMiniFormModel{


  getFormFields(): Array<MiniFormField> {
  
    return [
    
      new MiniFormField(
      
        'firstname', //property name (setter)
        FieldType.Text, // property type
        'First Name', // label

        //validators
        [
          Validators.required,
          Validators.minLength(2)
        ],

        //extra options
        {
          translations: {
            minlength: "Should have at least 2 characters !"
          }
        }
        
      )
      
    ]
  }
  
  
  private _firstname: string;

  get firstname(): string {
    return this._firstname;
  }

  set firstname(value: string) {
    this._firstname = value;
  }
}

And in the html we pass an instance of the model to the MiniForm component and a callback function for the successful submit.

<mini-form 
    [model]="myAccountInstance"
    (onSubmit)="formSubmitted($event)">
</mini-form>

EXTRA DETAILS

MiniForm component parameters:

model: IMiniFormModel - instance of a class implementing IMiniFormModel
validate: boolean - flag used to bypass validation if required (form will submit even if invalid)
onSubmit: fn(populatedModel: IMiniFormModel) - a function receiving the data

MiniFormField

A form field (input, textarea etc) is generated based on the parameters passed to this object.

MiniFormField constructor params

name: string - The name of the model property to be populated by the generated input
type: FieldType enum - the type of input to be generated by the form
label: string (optional) - the label to be shown near the form input. If not provided the name will be used.
validator: ValidatorFn|ValidatorFn[] (optional) - default angular validators to be used on the form field
extras: any (optional) - extra options like:
                - options: MiniFormOption[] - an array of MiniFormOptions used for select and radio values
                - translations: {} - translations used for validation messages in the form of 
                key - value pairs, where key is the validation error (ex: required, minlength) and value is the message to be shown when the field is invalid

FieldType

The type of the field generated is determined by using one of these values.

FieldType enum - specifies the form input type that needs to be rendered

Text - input type-text
TextArea - textarea
Number - input type-number
Checkbox - input type-checkbox
Select - select - requires options
Radio - input type-radio - requires options

MiniFormOption

A select or radio option is determined by a MiniFormOption object.

MiniFormOption constructor params

label: string - the name of the option (shown on the screen)
value: string - the value of the option bound to the model

If you don't find this info sufficient please send me a message and I will updated it accordingly. Any feedback is appreciated.