Angular-json-form NPM

Angular JSON Form

Description

Angular JSON Form is a angular module with a component to allow create html form from a json or javascript object, fully modelable and stylizable with the most common types of inputs and some custom ones, a set of buttons and callbacks functions.

Quick links

Installation

npm install angular-json-form

Quickstart

1. Add the `AngularJsonFormModule` to `imports` in `src/app/app.module.ts`:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AngularJsonFormModule } from 'angular-json-form';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    JsonFormAngularModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Add the form object in your component ts file:

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'json-form-app';
    form: any = {
        // options
    };
}

3. Add the component in the html template:

<angular-json-form [form]="form"></angular-json-form>

4. Quickstart.

Set the form object for a classic login form with 2 controls, one text type and anohter password type, plus the submit button.

{
    title: "Example form.",
    groups: [
        {
            fields: [
                {
                    name: "user",
                    type: "text",
                    label: "User",
                    required: true,
                },
            ],
        },
        {
            fields: [
                {
                    name: "password",
                    type: "password",
                    label: "Password",
                    required: true,
                },
            ],
        },
    ],
    buttons: [
        {
            text: "Login",
            submit: true,
            primary: true,
        },
    ],
}

npm.io

5. Submit and handle values.

In the html template, add the event (send) to capture the Submit, and send the parameters ($event) to a custom function.

<angular-json-form [form]="form" (send)="handleValues($event)"></angular-json-form>

Create a custom function in your component ts file.

handleValues(values) {
    // Do something...
}

Usage

Input Types

Each element in a groups array, is a line of the form and each element in a fields array is a input in a group line. Properties name and type are required.

npm.io

Text, Number, E-Mail and Tel.

{
    fields: [
        {
            name: "textname",
            type: "text",
            label: "Text Label",
        },
    ],
},
{
    fields: [
        {
            name: "numbername",
            type: "number",
            label: "Number Label",
        },
    ],
},
{
    fields: [
        {
            name: "emailname",
            type: "email",
            label: "E-Mail Label",
        },
    ],
},
{
    fields: [
        {
            name: "telname",
            type: "tel",
            label: "Tel Label",
        },
    ],
},

Checkbox and Radio button.

{
    fields: [
        {
            name: "checkboxname",
            type: "checkbox",
            label: "CheckBox Label",
            text: "CheckBox Text",
        },
    ],
},
{
    fields: [
        {
            name: "radioname",
            type: "radio",
            label: "Radio Label",
            options: ["Option 1", "Option 2", "Option 3"],
        },
    ],
},

Password.

{
    fields: [
        {
            name: "passwordname",
            type: "password",
            label: "Password Label",
        },
    ],
},

Select, single and multiple options.

{
    fields: [
        {
            name: "selectname",
            type: "select",
            label: "Select Label",
            options: ["Option 1", "Option 2", "Option 3"],
        },
    ],
},
{
    fields: [
        {
            name: "selectmultiplename",
            type: "select",
            label: "Multiple Select Label",
            options: ["Option 1", "Option 2", "Option 3"],
            multiple: true,
        },
    ],
},

List items.

{
    fields: [
        {
            name: "listname",
            type: "list",
            label: "List Label",
        },
    ],
},

Color selector.

{
    fields: [
        {
            name: "colorname",
            type: "color",
            label: "Color Label",
        },
    ],
},

File upload, single and multiple.

Property maxsize is a max size value for a file. Default value 500 KB (512000 bytes). Max value allowed is 5 MB (5242880 bytes) Property maxfiles is a max files count for a upload. Default value 4. Max value allowed is 8

{
    fields: [
        {
            name: "filecontain",
            type: "file",
            label: "File",
        },
    ],
},
{
    fields: [
        {
            name: "filemultiplename",
            type: "file",
            label: "Multiple files upload",
            multiple: true,
        },
    ],
},

Image upload, contain and cover format preview.

Property maxsize is a max size value for a file. Default value 500 KB (512000 bytes). Max value allowed is 5 MB (5242880 bytes)

{
    fields: [
        {
            name: "imagecontain",
            type: "image",
            label: "Image Contain Label",
            maxsize: 100000,
        },
    ],
},
{
    fields: [
        {
            name: "imagecover",
            type: "image",
            label: "Image Cover Label",
            cover: true,
        },
    ],
},

Multiple Image upload.

Property maxfiles is a max files count for a upload. Default value 4. Max value allowed is 8

{
    fields: [
        {
            name: "imagemultiplename",
            type: "image",
            label: "Multiple Images upload",
            maxsize: 512000,
            multiple: true,
        },
    ],
},

Textarea.

{
    fields: [
        {
            name: "textareaname",
            type: "textarea",
            label: "Textarea Label",
        },
    ],
},

Hidden.

{
    fields: [
        {
            name: "hiddenname",
            type: "hidden",
        },
    ],
},

Inline fields

More than one input element on a fields array for a inline desing. Not recomended more than 3 items.

{
    fields: [
        {
            name: "text2name",
            type: "text",
            label: "Text Inline Left",
            required: true,
        },
        {
            name: "text3name",
            type: "text",
            label: "Text Inline center",
        },
        {
            name: "text4name",
            type: "text",
            label: "Text Inline Right",
        },
    ],
},

Button Set

Each element in a buttons array, is a button in a group line.

{
    text: "No",
    event: "no",
},
{
    text: "Yes",
    submit: true,
    primary: true,
},

npm.io

Set the (event) in a html template to capture the other events button.

<angular-json-form [form]="form" (event)="handleEvent($event)" (send)="handleValues($event)"></angular-json-form>

Create a custom function in your component ts file.

handleEvent(event) {
    // Do something...
}

Validators

Property	Type	Description
required	bool	Required field on a submit event
max	integer	Max value for a number input type
min	integer	Max value for a number input type
maxlength	integer	Max length for a value
minlength	integer	Min length for a value
maxsize	integer	Max size for a file

Custom Properties

Property	Type	Description
value	any	Initial input value
label	string	Top legend for a input
placeholder	string	Placeholder text for a input
disabled	bool	Disabled input form
hidden	bool	Hidden input form
searchable	bool	Enable search input for a select input type
multiple	bool	Enable multiple item. Only for image and select type
range	bool	Enable range for data values. Only for date type
cover	bool	Format image size to cover the background. Only for image type
help	string	Tooltip text on a help icon for som e help text
spinner	string	Spinner animation on a button after submit