0.0.23 • Published 2 years ago
ng-cms-form v0.0.23
NG CMS Form
NG CMS Form is a set of AngularJS directives.
- Create a form directly from a JSON schema.
- 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
- 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 | -- |
-- | |
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
0.0.23
2 years ago
0.0.21
2 years ago
0.0.22
2 years ago
0.0.20
3 years ago
0.0.17
3 years ago
0.0.18
3 years ago
0.0.19
3 years ago
0.0.16
3 years ago
0.0.15
3 years ago
0.0.14
4 years ago
0.0.13
4 years ago
0.0.12
4 years ago
0.0.11
4 years ago
0.0.10
4 years ago
0.0.9
4 years ago
0.0.8
4 years ago
0.0.7
4 years ago
0.0.6
4 years ago
0.0.5
5 years ago
0.0.4
5 years ago
0.0.3
5 years ago
0.0.2
5 years ago
0.0.1
5 years ago