@rapidui/quiver-forms

Rapid UI Forms Module

Usage no npm install needed!

<script type="module">
  import rapiduiQuiverForms from 'https://cdn.skypack.dev/@rapidui/quiver-forms';
</script>

README

rui-dynamic-forms

API Summary

Properties:

Name Type Description
elements? IDynamicElementConfig[] JS Object that will render the elements depending on its config. [name] property is required.
form get(): FormGroup Getter property for dynamic [FormGroup].
valid get(): boolean Getter property for [valid] of dynamic [FormGroup].
value get(): any Getter property for [value] of dynamic [FormGroup].
errors get(): {[name: string]: any} Getter property for [errors] of dynamic [FormGroup].
controls get(): {[key: string]: AbstractControl} Getter property for [controls] of dynamic [FormGroup].

Setup

Import the [QuiverDynamicFormsModule] in your NgModule:

import { QuiverDynamicFormsModule } from '@quiver/dynamic-forms';
@NgModule({
  imports: [
    QuiverDynamicFormsModule,
    ...
  ],
  ...
})
export class MyModule {}

Usage

rui-dynamic-forms element generates a form dynamically

Pass an array of javascript objects that implement [IDynamicElementConfig] with the information to be rendered to the [elements] attribute.

export interface IDynamicElementConfig {
  label?: string;
  name: string;
  type: DynamicType | DynamicElement;
  required?: boolean;
  min?: any;
  max?: any;
  selections?: any[];
  default?: any;
}

Example for HTML usage:

<rui-dynamic-forms [elements]="elements">
</rui-dynamic-forms>
import { IDynamicElementConfig, DynamicElement, DynamicType } from '@covalent/dynamic-forms';
...
})
export class Demo {
  elements: IDynamicElementConfig[] = [{
    name: 'input',
    type: DynamicElement.Input,
    required: true,
  }, {
    name: 'slider',
    label: 'Label',
    type: DynamicElement.Slider,
    required: true,
  }, {
    name: 'boolean',
    type: DynamicType.Boolean,
    default: false,
  }, {
    name: 'select',
    type: DynamicElement.Select,
    required: true,
    selections: ['A','B','C']
    default: 'A',
  }];
}