npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@modusoperandi/formio-angular

v7.0.0

Published

Form.io Angular JSON Form Renderer ========================== This library serves as a Dynamic JSON Powered Form rendering library for [Angular](https://angular.io). This works by providing a JSON schema to a ```<formio>``` Angular component, where that f

Downloads

10

Readme

Form.io Angular JSON Form Renderer

This library serves as a Dynamic JSON Powered Form rendering library for Angular. This works by providing a JSON schema to a <formio> Angular component, where that form is dynamically rendered within the front end application. This allows forms to be dynamically built using JSON schemas.

Angular Material

If you are looking for Angular Material support, then this is within a separate library @ https://github.com/formio/angular-material-formio

Running Demo

To run a demo of the Form.io Angular renderer, please follow these steps.

  1. Make sure you have the Angular CLI installed on your machine.
  2. Download the Angular Demo Application to your computer.
  3. With your terminal, type npm install
  4. Now type ng serve

This will startup an example application where you can see all the features provided by this module.

Here is the hosted demo application https://formio.github.io/angular-demo/

Using within your application

You can easily render a form within your Angular application by referencing the URL of that form as follows.

<formio src='https://examples.form.io/example'></formio>

You can also pass the JSON form directly to the renderer as follows.

<formio [form]='{
    "title": "My Test Form",
    "components": [
        {
            "type": "textfield",
            "input": true,
            "tableView": true,
            "inputType": "text",
            "inputMask": "",
            "label": "First Name",
            "key": "firstName",
            "placeholder": "Enter your first name",
            "prefix": "",
            "suffix": "",
            "multiple": false,
            "defaultValue": "",
            "protected": false,
            "unique": false,
            "persistent": true,
            "validate": {
                "required": true,
                "minLength": 2,
                "maxLength": 10,
                "pattern": "",
                "custom": "",
                "customPrivate": false
            },
            "conditional": {
                "show": "",
                "when": null,
                "eq": ""
            }
        },
        {
            "type": "textfield",
            "input": true,
            "tableView": true,
            "inputType": "text",
            "inputMask": "",
            "label": "Last Name",
            "key": "lastName",
            "placeholder": "Enter your last name",
            "prefix": "",
            "suffix": "",
            "multiple": false,
            "defaultValue": "",
            "protected": false,
            "unique": false,
            "persistent": true,
            "validate": {
                "required": true,
                "minLength": 2,
                "maxLength": 10,
                "pattern": "",
                "custom": "",
                "customPrivate": false
            },
            "conditional": {
                "show": "",
                "when": null,
                "eq": ""
            }
        },
        {
            "input": true,
            "label": "Submit",
            "tableView": false,
            "key": "submit",
            "size": "md",
            "leftIcon": "",
            "rightIcon": "",
            "block": false,
            "action": "submit",
            "disableOnInvalid": true,
            "theme": "primary",
            "type": "button"
        }
    ]
}'></formio>

This is a very simple example. This library is capable of building very complex forms which include e-signatures, columns, panels, field conditionals, validation requirements, and the list goes on and on.

Usage

To use this library within your project, you will first need to install it as a dependency.

npm install --save @modusoperandi/formio-angular formiojs

You can now include the module in your Angular application like so.

import { FormioModule } from '@modusoperandi/formio-angular';
@NgModule({
    imports: [ BrowserModule, CommonModule, FormioModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

Included Libraries

This library is a combination of multiple libraries that enable rapid Serverless application development using Form.io. These libraries are as follows.

  1. Form Renderer - The form renderer in Angular
  2. Form Builder - The form builder in Angular
  3. Form Manager - The form management application used to manage forms.
  4. Authentication - Allows an easy way to provide Form.io authentication into your application.
  5. Resource - A way to include the Resources within your application with full CRUDI support (Create, Read, Update, Delete, Index)
  6. Data Table (Grid) - A way to render data within a Table format, which includes pagination, sorting, etc.

Click on each of those links to read more about how they work and how to utilize them to their fullest potential.

Demo Application

If you would like to run a demonstration of all the features of this module, then you can check out the Angular Demo Application, which is the code behind the following hosted application @ https://formio.github.io/angular-demo

Application Starter Kit

For help in getting started using this library, we created the angular-app-starterkit repository to help you get started with best practices with using Form.io within an Angular application. You can try this applicatoin by downloading that application and then doing the following.

npm install
npm start

Full Documentation

To read up on the full documentation of this library, please check out the Wiki Page

About Form.io

Form.io is a combined form and data management API platform created for developers who are building "Serverless" form-based applications. Form.io provides an easy drag-and-drop form builder workflow allowing you to build complex forms for enterprise applications quickly and easily. These forms are then embedded directly into your application with a single line of code that dynamically renders the form (using Angular or React) in your app while at the very same time generating the RESTful API to support those forms. The Form.io platform also offers numerous 3rd-party services that are fully integrated into the form building process allowing you to extend the power and capability of your apps while saving time and effort.

You can use this renderer with Form.io by simply pointing the src parameter to the URL of the form. For example, the following URL points to the JSON schema of a form built on Form.io.

https://pjmfogrfqptslvi.form.io/test

To render this form, you simply provide that URL to the <formio> directive like so.

<formio src="https://pjmfogrfqptslvi.form.io/test"></formio>

Not only will this render the form, but it will also submit that form to the provided API endpoint.