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:
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 |
FormFieldCheckbox
checkbox |
FormFieldSelect
select | Additional options:
FIELD | TYPE | DEFAULT | DESCRIPTION |
---|---|---|---|
options |
{ label: string, value: any } | Select options | |
multiple |
boolean | Whether the user can select multiple options |
FormFieldNumber
number |
FormFieldText
text |
FormFieldPassword
password | Additional options:
FIELD | TYPE | DEFAULT | DESCRIPTION |
---|---|---|---|
passwordRevealButton | boolean | false | Enables a show/hide functionality on the password field |
FormFieldTextarea
textarea |
FormFieldCode
code | Additional options:
FIELD | TYPE | DEFAULT | DESCRIPTION |
---|---|---|---|
options |
object | Config options passed to the CodeMirror instance |
FormFieldFile
file | 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
, ...).