cr-dynamic-forms
Advanced tools
A angular library that provides a formular generator configured by a json document.
A angular library that provides a formular generator configured by a json document.
cr-dynamic-forms is an easy way to create complex forms for complex data, without any knowladge about angular material and angular reactive forms.
With cr-dynamic-forms you have the focus on the aspects of the data structure and not on "how to" create a complex form with angular.
Installation is done using npm install command:
# install library
$ npm install --save cr-dynamic-forms
# install depency
$ ng add @angular/material
http://cr-dynamic-components.creaera.com/forms
See an example on https://stackblitz.com/edit/angular-ivy-y9hh8d
app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { FlexLayoutModule } from "@angular/flex-layout";
import { MatButtonModule } from "@angular/material/button";
import { AppComponent } from "./app.component";
import { CrDynamicFormsModule } from "cr-dynamic-forms";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
FlexLayoutModule,
CrDynamicFormsModule,
MatButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
CSS/SCSS
@import url(//fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap);
@import url(//fonts.googleapis.com/icon?family=Material+Icons);
HTML
<cr-dynamic-forms
#from
[schema]="schema"
[data]="data"
[settings]="settings"
(onSubmit)="onSubmit($event)"
(onNew)="onNew($event)"
(onDelete)="onDelete($event)"
(onChange)="onChange($event)"
(onFocus)="onFocus($event)"
(onBlur)="onBlur($event)"
></cr-dynamic-forms>
TS
import { Component, VERSION } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
/**
* Get a reference of the html element
*/
@ViewChild("form", { static: true }) form: CrDynamicFormsComponent;
/**
* Contains the data / form values;
*/
public data: any = {};
/**
* Describes the data schema and the structure of the form
*/
public schema = [
{
type: "text",
label: "Textfield",
name: "text_field"
}
];
/**
* Contains optional global settings of the form.
*/
public settings = {
toolBarTop: {
enable: false,
enableNewButton: true,
enableSaveButton: true,
enableDeleteButton: true
},
toolBarBottom: {
enable: true,
enableNewButton: true,
enableSaveButton: true,
enableDeleteButton: true
},
text: {
buttons: {
new: "New",
save: "Save",
delete: "Delete"
},
errors: {
required: "Please enter a value. This field is required.",
mail: "Please enter a valid email adress.",
length: "This value is to short."
}
},
items: {
child1: {
children:[{
}, {
a: {
classes: ['red-test']
}
}]
},
child2: {
classes: ['blue-test']
},
child3: {
classes: ['yellow-test']
}
}
};
/**
* This method will be triggered, if the submit button would be clicked.
*
* @param data contains the values
*/
public onSubmit(data: any): void {
console.log("onSubmit()");
console.log(data);
}
/**
* This method will be triggered, if the new button would be clicked.
*
* @param data contains the current values before reset
*/
public onNew(data: any): void {
console.log("onSubmit()");
console.log(data);
this.data = {
text_field: "Hello world!"
};
}
/**
* This method will be triggered, if the delete button would be clicked.
*
* @param data contains the current values
*/
public onDelete(data: any): void {
console.log("onDelete()");
console.log(data);
}
/**
* This method will be triggered, if the data would be changed.
*
* @param data contains the current values after a field was changed
*/
public onChange(data: any): void {
console.log("onChange()");
console.log(data);
}
/**
* This method will be triggered, if the cursor enters a field.
*
* @param event { ctlName: string, path: string }
*/
public onFocus(event: string) {
console.log("onFocus()");
console.log(event);
}
/**
* This method will be triggered, if the cursor leaves a field.
*
* @param event { ctlName: string, path: string }
*/
public onBlur(event: string) {
console.log("onBlur()");
console.log(event);
}
}
See an example on https://stackblitz.com/edit/angular-ivy-swxysj
Text fields
public schema = [
{
type: "text",
label: "Textfield",
name: "text_field",
tooltip: "Tooltip"
},
{
type: "text",
label: "Textfield with autocomplete",
name: "text_field_autocomplete",
autocomplete: [
{ value: "tokio", label: "Tokio" },
{ value: "osaka", label: "Osaka" },
{ value: "himeji", label: "Himeji" }
]
},
{
type: "text",
label: "textfield read only",
name: "text_field_read_only",
tooltip: "Tooltip",
autocomplete: [
{
group: "A",
options: [
{
label: "Alabama",
value: 0
},
{
label: "Alaska",
value: 1
},
{
label: "Arizona",
value: 2
},
{
label: "Arkansas",
value: 3
}
]
},
{
group: "C",
options: [
{
label: "California",
value: 4
},
{
label: "Colorado",
value: 5
},
{
label: "Connecticut",
value: 6
}
]
},
{
group: "D",
options: [
{
label: "Delaware",
value: 7
}
]
}
]
},
{
type: "text",
label: "Textfield read only",
name: "text_field_read_only",
rules: ["readonly"]
},
{
type: "text",
label: "Mandatory textfield",
name: "mandatory_textfield",
rules: ["required"]
},
{
type: "text",
label: "E-Mail",
name: "email",
rules: ["email"]
},
{
type: "text",
label: "Minimal string length value",
name: "minimal_value",
rules: [{ min: 4 }]
},
{
type: "password",
label: "Password",
name: "password",
rules: ["required"]
},
{
type: "textarea",
label: "textarea",
name: "textarea",
height: "100px"
}
];
Select
See an example on https://stackblitz.com/edit/angular-ivy-8wxrdv
public schema = [
{
type: "select",
label: "select box",
name: "select_box",
filter: true
options: [{ label: "no", value: "no" }, { label: "yes", value: "yes" }]
},
{
type: "select",
label: "Select",
name: "select",
options: [{
value: "Value",
label: "Label",
icon: "format_color_fill",
}],
classes: ["color-a"]
},
{
type: "select",
label: "multi select box",
name: "multiselect_box",
multiple: true,
options: [
{ label: "Alabama", value: "Alabama" },
{ label: "Alaska", value: "Alaska" },
{ label: "Arizona", value: "Arizona" }
]
},
{
type: "select",
label: "select box with groups",
name: "select_box_with_groups",
options: [
{
group: "A",
options: [
{
label: "Alabama",
value: 0
},
{
label: "Alaska",
value: 1
},
{
label: "Arizona",
value: 2
},
{
label: "Arkansas",
value: 3
}
]
},
{
group: "C",
options: [
{
label: "California",
value: 4
},
{
label: "Colorado",
value: 5
},
{
label: "Connecticut",
value: 6
}
]
},
{
group: "D",
options: [
{
label: "Delaware",
value: 7
}
]
}
]
}
];
Other fields
See an example on https://stackblitz.com/edit/angular-ivy-evduv8
public schema = [
{
type: 'button',
label: 'Click me!!!',
name: 'clickme',
style: 'flat',
color: 'primary'
},
{
type: "toggle",
label: "Toggle",
name: "toggle"
},
{
type: "datetime",
label: "Datetime",
name: "datetime"
},
{
type: "chiplist",
label: "chiplist",
name: "chiplist",
autocomplete: [
{ value: "tokio", label: "Tokio" },
{ value: "osaka", label: "Osaka" },
{ value: "himeji", label: "Himeji" }
]
},
{
type: "slider",
label: "slider read only",
name: "slider",
options: {
min: 0,
max: 255,
step: 1,
thumbLabel: true
}
}
];
See an example on https://stackblitz.com/edit/angular-ivy-damzce
public schema = [
{
type: "fieldset",
label: "fieldset headline with background color",
classes: ["myClass"],
options: { background: "#eeeeee", margin: "1em", padding: "1em" },
children: [
{
type: "text",
label: "Text A",
name: "text_a"
}
]
},
{
type: "cols",
children: [
{
type: "text",
label: "Col 1",
name: "col1"
},
{
type: "text",
label: "Col 2",
name: "col2"
}
]
},
{
type: "group",
label: "App",
name: "apps",
children: [
{
type: "text",
label: "Text B",
name: "text_b"
}
]
},
{
type: "tabgroup",
children: [
{
type: "tab",
label: "tab 1",
children: [
{
type: "text",
label: "Text C",
name: "text_c"
}
]
},
{
type: "tab",
label: "tab 2",
children: [
{
type: "text",
label: "Text D",
name: "text_d"
}
]
}
]
}
];
See an example on https://stackblitz.com/edit/angular-ivy-zr1mm8
/**
* Get a reference of the html element
*/
@ViewChild("form", { static: true }) form: CrDynamicFormsComponent;
/**
* public api save
*/
public save() {
this.form.submit();
}
/**
* public api reset
*/
public new() {
this.form.reset();
}
/**
* public api reset
*/
public action() {
this.form.delete();
}
/**
* public api setAutocomplete
*/
public setAutocomplete() {
/**
* @param fieldName: string
* @param options: any[ {value: string, label: string} ]
*/
this.form.setAutocomplete("text_field", [
{ value: "München", label: "München" },
{ value: "Hamburg", label: "Hamburg" },
{ value: "Nürnberg", label: "Nürnberg" }
]);
};
}
/**
* public api getData
*/
public getData() : void {
console.log(this.form.getData());
}
MIT
FAQs
A angular library that provides a formular generator configured by a json document.
The npm package cr-dynamic-forms receives a total of 14 weekly downloads. As such, cr-dynamic-forms popularity was classified as not popular.
We found that cr-dynamic-forms demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Popular npm packages like eslint-config-prettier were compromised after a phishing attack stole a maintainer’s token, spreading malicious updates.
Security News
/Research
A phishing attack targeted developers using a typosquatted npm domain (npnjs.com) to steal credentials via fake login pages - watch out for similar scams.
Security News
Knip hits 500 releases with v5.62.0, refining TypeScript config detection and updating plugins as monthly npm downloads approach 12M.