Ngx Form Schema

A simple extension of Angular's form that adds control management through schema.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Features
   • Built For
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgements

About The Project

The Form Schema library was born out of the need to easily manage the fields of a form through a schema while allowing maximum freedom in implementing the GUI.

This project is currently in beta version, therefore it is not yet ready for production.

Features

Built For

• Angular@15

Getting Started

IMPORTANT: This project is currently in beta version, therefore it is not yet ready for production.

Prerequisites

This library needs the following packages: rxjs (if not already installed), jsep and jse-eval. so, before to install the library, install those packages.

• npm

  npm install rxjs@latest jsep@1.3 jse-eval@1.5

Installation

To use Ngx Form Schema in your project simply execute the following command:

• npm

  npm install ngx-form-schema@latest --save

Usage

This is how to create a control instance by a schema.

const control = new FormControlSchema<UserRoleType>({
  defaultValue: string | number | boolean | null,
  type: FormSchemaFieldType,
  key: string,
  label: string,
  placeholder?: string,
  hint?: string,
  readonly?: boolean,
  disabled?: boolean,
  disableWhenNotVisible?: boolean,
  size?: FormSchemaFieldSize,
  maxLength?: number,
  visible?: boolean,
  group?: string,
  options?: FormSchemaFieldOptions[] | Observable<FormSchemaFieldOptions[]>,
  order?: number,
  prefix?: string,
  dependencies?: string[],
  suffix?: string,
  permissions?: FormSchemaPermissionSettings<UserRoleType>,
  userRoles?: UserRoleType[],
  validators?: FormSchemaValidators,
  conditions?: FormSchemaConditions
}, ValidatorFn[]);

This is how to create a group of controls.

const groupBySchema = new FormGroupSchema<UserRoleType>({
  fields: {
    foo: fooControl,
    bar: barControl
  }
});

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Your Name - @your_twitter - hello@mattiamancarella.com

Project Link: https://github.com/mancarius/ngx-form-schema