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