Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@banzaicloud/uniform

Package Overview
Dependencies
Maintainers
2
Versions
89
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@banzaicloud/uniform

This library contains building blocks for generating dynamic Angular forms.

  • 4.0.0
  • latest
  • npm
  • Socket score

Version published
Weekly downloads
0
Maintainers
2
Weekly downloads
 
Created
Source

Uniform
npm version

This library contains building blocks for generating dynamic Angular forms.

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:

FIELDTYPEDEFAULTDESCRIPTION
controlTypestring (required)Control type
keystring (required)Unique key of the control
labelstring (required)Label of the control (user friendly name)
defaultanyDefault value
requiredboolfalseRequired control
hiddenboolfalseAlways hidden control
disabledboolfalseAlways disabled control (eg. use with default)
placeholderstringPlaceholder (for example or description)
descriptionstringDescription or hint
minLengthnumberMinimum length of value
maxLengthnumberMaximum length of value
patternstringRegular expression to validate value (eg. fqdn)
showIfobjectJSON schema to conditionally show or hide the control

checkbox | FormFieldCheckbox

select | FormFieldSelect

Additional options:

FIELDTYPEDEFAULTDESCRIPTION
options{ label: string, value: any }Select options
multiplebooleanWhether the user can select multiple options

number | FormFieldNumber

text | FormFieldText

password | FormFieldPassword

Additional options:

FIELDTYPEDEFAULTDESCRIPTION
passwordRevealButtonbooleanfalseEnables a show/hide functionality on the password field

textarea | FormFieldTextarea

code | FormFieldCode

Additional options:

FIELDTYPEDEFAULTDESCRIPTION
optionsobjectConfig options passed to the CodeMirror instance

file | FormFieldFile

Additional options:

FIELDTYPEDEFAULTDESCRIPTION
fillFormbooltrueParse the file as JSON and set the form values
acceptstringComma-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, ...).

FAQs

Package last updated on 28 May 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc