B2All Factory Library is Angular library that generate form based on configuration.
Bootstrap 5.1.3
Angular 12 and above
npm install @b2allsolution/factoryImport B2allDynamicFormModule into app.module or selected module.
Add ProgressSpinnerService into providers if button is used in configuration.
@NgModule({
declarations: [
AppComponent,
...
],
imports: [
BrowserModule,
AppRoutingModule,
// import B2allDynamicFormModule
B2allDynamicFormModule,
],
providers: [
// add ProgressSpinnerService if button is used
ProgressSpinnerService
],
bootstrap: [AppComponent]
})
export class AppModule { }HTML :
<b2all-dynamic-form
#dynamicForm="b2allDynamicForm"
[inputFormConfigs]="config"
[inputSavedData]="savedData"
[inputFormName]="'form_name'"
(formOnSubmit)="formOnSubmit($event)"
>
</b2all-dynamic-form>Typescript :
this.config: IFieldConfig[] = [
{
name: 'full_name',
display_text: 'Full name: ',
type: EFieldConfigType.Input,
validation_fn: getValidators([{ type: EFormValidator.Required }]),
type_config: {
type: EFieldConfigInputType.Text,
list: false,
css_class: {
group: 'form-group mb-3',
group_label: '',
input: 'form-control',
input_label: 'mb-1',
},
},
css_class: 'col-12',
},
];
this.savedData = {
full_name: 'Daniel'
};
formOnSubmit(formValue: any): Promise<void> {
console.log(formValue);
}| Key | Type | Description |
|---|---|---|
| name? | string | Name of the field to be store into database as the field name |
| display_text? | string | Display Text for label |
| value? | any | Value of this control, only for single object |
| validation_fn? | ValidatorFn[] | Validation for this control |
| async_validation_fn? | AsyncValidatorFn | Async validation for this control |
| disabled? | boolean | Disabled field (disabled field will not be store when submit) |
| index? | number | For field sorting |
| css_class? | string | For css class |
| type | EFieldConfigType | Indicate field type |
| type_config | * | Futher configuration for specific type (detail is at below) |
| Key | Type | Description |
|---|---|---|
| readonly? | boolean | Control become readonly (undefined to disabled readonly) |
| type? | EFieldConfigInputType | Input type |
| list? | boolean | For Checkbox and Radio list |
| dataset? | IKeyValueInString[] | When list is true, this field is use |
| input_helper? | boolean | ? |
| single_checkbox_display_text? | string | When list is false and is Checkbox, text will display beside checkbox |
| css_class? | * | Css class |
| placeholder? | string | Placeholder (Optional, if this field has value, display_text will not be shown) |
| Key | Type | Description |
|---|---|---|
| type | 'button' / 'submit' | Button type |
| onclick_fn | () => Promise | Click Event |
| loading_text? | string | Loading Text |
| css_class? | * | Css class |
| Key | Type | Description |
|---|---|---|
| dataset | IMultiSelect[] | Select Dataset |
| controls | [*] | Select control |
| css_class | * | CSS class |
| Key | Type | Description |
|---|---|---|
| hierarchy_level? | IMultiSelect[] | hierarchy |
| field_configs | IFieldConfig[] | FieldConfig |
| css_class | * | CSS class |
| table_column_names? | string[] | Configuration for recursive enabled template |
| table_column_width? | string[] | table column width |
| table_caption? | string | table caption |
| enable_default_options? | IKeyValueInString[] | default value |
| hideAddButton? | boolean | hide add button flag |
| hideRemoveRowItemButton? | boolean | hide remove row item button flag |
| Key | Type | Description |
|---|---|---|
| field_configs | IFieldConfig[] | FieldConfig |
| css_class | * | CSS class |
| Key | Type | Description |
|---|---|---|
| row_count | number | Number of row |
| col_count? | number | Number of column |
| readonly | boolean | Read Only flag |
| css_class | * | CSS class |
| placeholder | string | placeholder |
| Key | Type | Description |
|---|---|---|
| name | number | Name of the control |
| type? | 'select' / 'datalist | Type of the control |
| label? | string | Label for the field |
| key_field | string | Key's field name of the dataset |
| value_field | string | Value's field name of the dataset |
| value | string | value |
| validation_fn | string | Validation for the selected field |
| disabled | string | Disabled selected control |
| placeholder | string | placeholder for the control |
RadioButtonDefault, Divider
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.