@banzaicloud/uniform v4.0.0

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:

checkbox | FormFieldCheckbox

select | FormFieldSelect

Additional options:

number | FormFieldNumber

text | FormFieldText

password | FormFieldPassword

Additional options:

textarea | FormFieldTextarea

code | FormFieldCode

Additional options:

file | FormFieldFile

Additional options:

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