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, ...).