@banzaicloud/uniform

Uniform

This library contains building blocks for generating dynamic Angular forms.

• Usage
• Control types
  • checkbox | FormFieldCheckbox
  • select | FormFieldSelect
  • number | FormFieldNumber
  • text | FormFieldText
  • password | FormFieldPassword
  • textarea | FormFieldTextarea
  • code | FormFieldCode
  • file | FormFieldFile

Usage

Install dependency:

npm i @banzaicloud/uniform

Include the module import for your application:

import { UniformModule } from '@banzaicloud/uniform';

@NgModule({
  imports: [
    // ...
    UniformModule,
  ],
})
export class AppModule {}

Use the UniformService to generate groups with form field types from raw input:

import { Component, OnInit } from '@angular/core';
import { UniformService, IFormFieldGroup } from '@banzaicloud/uniform';

@Component({
  selector: 'app-root',
  template: `
    <bcu-form
      [groups]="groups"
      (valueChanges)="onValueChanges($event)"
      (save)="onSave($event)">
    </bcu-form>
  `,
})
export class AppComponent implements OnInit {
  // can be fetched from an API
  rawGroups = [
    {
      name: 'Uniform demo',
      fields: [
        {
          controlType: 'textarea',
          key: 'wishlist',
          label: 'Wish list',
          placeholder: 'What are your desires?',
        },
      ],
    },
  ];
  groups: IFormFieldGroup[];
  values: { [key: string]: any };

  ngOnInit() {
    this.groups = UniformService.factory(this.rawGroups);
  }

  onValueChanges(values) {
    this.values = values;
  }

  onSave(rawValues) {
    console.log('Raw form values:', rawValues);
  }
}

Alternatively, use the field classes to build a form:

import { Component } from '@angular/core';
import { UniformService, FormFieldTextarea, IFormFieldGroup } from '@banzaicloud/uniform';

@Component({
  selector: 'app-root',
  template: `
    <bcu-form
      [groups]="groups"
      (valueChanges)="onValueChanges($event)"
      (save)="onSave($event)">
    </bcu-form>
  `,
})
export class AppComponent {
  groups: IFormFieldGroup[] = [
    {
      name: 'Uniform demo',
      fields: [
        new FormFieldTextarea({
          key: 'wishlist',
          label: 'Wish list',
          placeholder: 'What are your desires?',
        }),
      ],
    },
  ];
  values: { [key: string]: any };

  onValueChanges(values) {
    this.values = values;
  }

  onSave(rawValues) {
    console.log('Raw form values:', rawValues);
  }
}

Control types

Each control can be specified with the following options:

FIELD	TYPE	DEFAULT	DESCRIPTION
controlType	string (required)		Control type
key	string (required)		Unique key of the control
label	string (required)		Label of the control (user friendly name)
default	any		Default value
required	bool	false	Required control
hidden	bool	false	Always hidden control
disabled	bool	false	Always disabled control (eg. use with default)
placeholder	string		Placeholder (for example or description)
description	string		Description or hint
minLength	number		Minimum length of value
maxLength	number		Maximum length of value
pattern	string		Regular expression to validate value (eg. fqdn)
showIf	object		JSON schema to conditionally show or hide the control

checkbox | FormFieldCheckbox

select | FormFieldSelect

Additional options:

FIELD	TYPE	DEFAULT	DESCRIPTION
options	{ label: string, value: any }		Select options
multiple	boolean		Whether the user can select multiple options

number | FormFieldNumber

text | FormFieldText

password | FormFieldPassword

Additional options:

FIELD	TYPE	DEFAULT	DESCRIPTION
passwordRevealButton	boolean	false	Enables a show/hide functionality on the password field

textarea | FormFieldTextarea

code | FormFieldCode

Additional options:

FIELD	TYPE	DEFAULT	DESCRIPTION
options	object		Config options passed to the CodeMirror instance

file | FormFieldFile

Additional options:

FIELD	TYPE	DEFAULT	DESCRIPTION
fillForm	bool	true	Parse the file as JSON and set the form values
accept	string		Comma-separated list of accepted, unique file type specifiers

For example, when the field has a key of google.json_key and fillForm is set to true, the key-value pairs in the JSON file will be parsed and applied to the form values under the key prefix google.* (google.service_account, google.project_id, ...).