@neftx/generic-form

Description

Form builder with typed elements.

User Guide

Install Generic-Form using the npm package manager:

npm i @neftx/generic-from --save-dev for Generic Form. npm i @ng-select/ng-select for Ng-select. npm i @kolkov/angular-editor for Kolkov editor.

Before Using

1. Create 2 folders one in root directory as 'schema' another in src/app as 'generated-elements'.
2. In package.json under script tag add script "generate-elements": "node node_modules/@neftx/generic-form/generate-elements.js
3. import GenericFormModule in app.module

Creating Form Elements

Create a json file in the schema created above for generating input fields (form-elements) Sample

registration.model.json

{
  "modelName": "RegistrationModel",
  "fields": {
    "mobileNumber": {
      "label": "Mobile Number",
      "fieldType": "string",
      "helpText": "",
      "placeHolder": "Enter Mobile Number"
    },
    "userName": {
      "label": "User Name",
      "fieldType": "string",
      "helpText": "",
      "placeHolder": "Enter User Name"
    },
    "password": {
      "label": "Password",
      "fieldType": "string",
      "helpText": "",
      "placeHolder": "Enter Your Password"
    },
    "email": {
      "label": "Email",
      "fieldType": "string",
      "helpText": "[e-mail]",
      "placeHolder": "Enter Your Email"
    },
    "createdAt": {
      "label": "Created at",
      "fieldType": "date",
      "helpText": "",
      "placeHolder": "Enter Created at"
    },
    "updatedAt": {
      "label": "Updated at",
      "fieldType": "date",
      "helpText": "",
      "placeHolder": "Enter Updated at"
    }
  },
  "inputs": {
    "registration": {
      "name": "AppRegistration",
      "requiredFields": [
        "userName",
        "password",
        "mobileNumber"
      ],
      "optionalFields": [
        "email"
      ]
    }
  }
}

Generating Form Elements

1. Run npm run generate-elements in root directory
2. A typescripts file will be generated in the 'elements-generated' folder, created previously, with the provided modelName in json schema.

Example

We are creating Registration form as an example.

1. Simple form layout

   registration.component.ts

   import { Component } from "@angular/core";
   import { RegistrationForm } from '@generated-elements/RegistrationModel';
   @Component({
     selector: "registration-form",
     template: `<simple-form-layout [title]="'Generic Form'" [elementsHash]="input.elements"></simple-form-layout>`,
   })
   export class RegistrationComponent {
   constructor(public input: RegistrationForm){}
   }
   

   Preview
2. Simple form dual-layout

   registration.component.ts

   import { Component } from "@angular/core";
   import { RegistrationForm } from '@generated-elements/RegistrationModel';
   @Component({
     selector: "registration-form",
     template: `<simple-form-dual-layout [title]="'Generic Form'" [elementsHash]="input.elements"></simple-form-dual-layout>`,
     })
   export class RegistrationComponent {
   constructor(public input: RegistrationForm){}
   }
   

   Preview
3. Creating custom forms by using form elements

   registration.component.ts

import { FormBaseService } from '@neftx/generic-form';
import { Component } from "@angular/core";
import { AppRegistration } from '@generated-elements/RegistrationModel';
import { FormGroup } from '@angular/forms';
@Component({
  selector: "registration-form",
  templateUrl: "registration.component.html"
})
export class RegistrationComponent {
  registrationForm: FormGroup;
  constructor(
    private formBase: FormBaseService,
    public input: AppRegistration,
  ) {
    this.registrationForm = this.formBase.toFormGroupFromHash(this.input.elements);
  }
}

registration.component.html

<form [formGroup]="registrationForm" *ngIf="input.elements">
    <div class="row">
      <div class="col-md-6">
        <form-element [element]="input.elements.mobileNumber" [form]="registrationForm"
         [label]="true" [labelType]="'top'">
        </form-element>
      </div>
      <div class="col-md-6">
        <form-element [element]="input.elements.userName" [form]="registrationForm" [label]="true"
          [labelType]="'top'">
        </form-element>
      </div>
      <div class="col-md-6">
        <form-element [element]="input.elements.password" [form]="registrationForm" [label]="true"
          [labelType]="'top'">
        </form-element>
      </div>
      <div class="col-md-6">
        <form-element [element]="input.elements.email" [form]="registrationForm" [label]="true"
         [labelType]="'top'">
        </form-element>
      </div>
    </div>
    <div class="form-footer">
      <div class="d-flex justify-content-center">
        <button class="btn btn-secondary mr-3" type="button">Cancel</button>
        <button class="btn btn-primary" type="button">Submit</button>
      </div>
    </div>
  </form>

Preview

top :

Change labelType options to 'left', 'right','top'

left :