NG CMS Form

NG CMS Form is a set of AngularJS directives.

1. Create a form directly from a JSON schema.
2. Validate form fields against that same JSON schema.

Installation

You can get it on npm. Support angular 7 only

npm install ng-cms-form

Setup

app.module.ts

import { NgCmsFormModule } from 'ng-cms-form';

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

Install PrimeNG

https://www.primefaces.org/primeng/#/setup

npm install primeng^7.0.3
npm install primeicons^1.0.0

Styles Configuration

angular.json

"styles": [
  "node_modules/primeicons/primeicons.css",
  "node_modules/primeng/resources/themes/rhea/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  //...
],

Usage

1. Create form schema json

app.component.html

<ng-form-schema></ng-form-schema>

todoList.component.ts

fieldList = [
    {
      "type": "text",
      "label": "ID",
      "name": "id",
      "placeholder": "",
      "tooltip": "",
      "characterLimit": "",
      "customCssClass": "",
      "description": "",
      "display": true,
      "readonly": true,
      "required": false,
      "showInList": true,
      "allowSearch": true
    },
    ...
];

import { NgCmsFormService } from 'ng-cms-form';

constructor(
    private ngCmsFormService: NgCmsFormService,
    ...
}

this.cols = this.ngCmsFormService.getListCols(fieldList);

onClickEditBtn(rowData){
  // Handle edit button
}

todoList.component.html

Create list view

<!-- Default list view -->
<ng-cms-form-table [dataList]="dummyDataList" [cols]="cols" (onClickEditCallback)="onClickEditBtn($event)"></ng-cms-form-table>


<!-- Custom list view -->
<p-table #dt [columns]="cols" [value]="dummyDataList" [paginator]="true" [rows]="20" selectionMode="single">
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns" [pSortableColumn]="col.name">
        {{col.label}}
        <p-sortIcon [field]="col.name"></p-sortIcon>
      </th>
      <th>
        Edit
      </th>
    </tr>
    <tr>
      <th *ngFor="let col of columns">
        <p-multiSelect *ngIf="col['dataSourceValue'] && col['allowSearch']" [options]="col['dataSourceValue']"
          defaultLabel="All" (onChange)="dt.filter($event.value, col.name, 'in')" autoWidth='false'
          [style]="{'width':'100%'}"></p-multiSelect>

        <input *ngIf="!col['dataSourceValue'] && col['allowSearch']" class="form-control" type="text" (input)="dt.filter($event.target.value, col.name, 'contains')">

      </th>
      <th></th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex" let-columns="columns">
    <tr>
      <td *ngFor="let col of columns">
        <div *ngIf="!col['dataSourceValue']">
          {{rowData[col.name]}}
        </div>
        <div *ngIf="col['dataSourceValue']">
          {{col['dataSourceValueMap'][rowData[col.name]]}}
          <!-- {{rowData[col.name]}} -->
        </div>
      </td>
      <td>
        <div>
          <p-button label="Edit" icon="pi pi-pencil" iconPos="left" styleClass="ui-button ui-button-raised ui-button-rounded"
            (onClick)="onClickEditBtn(rowData)"></p-button>
        </div>
      </td>
    </tr>
  </ng-template>
</p-table>

todoDetail.component.html

<ng-cms-form [(ngModel)]="dummyDataList[fieldList[0].name]" [formModel]="fieldList[0]"></ng-cms-form>

Form types

Form Type | Description --- | --- Text field | -- Number | -- Email | -- Url | -- Password | -- Color Picker | -- Textarea | -- Checkbox | -- Selectbox | -- Select Button | -- Date | -- Image | -- File | -- WYSIWYG | -- Markdown editor | --

Properties

Parameter | Type | Default | Description --- | --- | --- | --- label | -- | -- | -- name | -- | -- | -- placeholder | -- | -- | -- description | -- | -- | -- tooltip | -- | -- | -- characterLimit | -- | -- | -- customCssClass | -- | -- | -- display | -- | -- | -- readonly | -- | -- | -- required | -- | -- | -- maximum | -- | -- | -- minimum | -- | -- | -- dataSourceValue | -- | -- | -- timeOnly | -- | -- | -- dateFormat | -- | -- | -- fileFormat | -- | -- | -- uploadApi | -- | -- | -- maxFileSize | -- | -- | -- showInList | -- | -- | -- allowSearch | -- | -- | --

Events

import { NgCmsFormService } from 'ng-cms-form';

Custom field option

let dataSource = [
  {'label': 'Option1', 'value': '1'}
  {'label': 'Option2', 'value': '2'}
];
this.fieldList = this.ngCmsFormService.udpateDataSource('demoFielldName', this.fieldList, dataSource);

getListCols

Filter the column for list view

formModelFormat

Create dataSourceValue mapping

updateDataSource

Custom dataSourceValue

formValidator