@dr-angular/form-material
v12.2.1
Published
A very useful tool for view dynamic forms using angular material. It just needs a json as input.
Downloads
46
Readme
A very useful tool for view dynamic forms using angular material. It just needs a json as input.
Install the library and import the "FormMaterialModule" module
// ...
import { FormMaterialModule } from '@dr-angular/form-material';
@NgModule({
declarations: [
AppComponent
],
imports: [
FormMaterialModule
]
})
export class AppModule { }
Construct the jsonHero object using the IDynamicForm interface:
@Input() jsonForm: IDynamicForm;
@Output() formSubmit: EventEmitter<any>;
formSubmitted: any = {};
// ...
jsonHero: IDynamicForm = {
name: 'form_1',
title: 'My example form',
buttonResetName: 'Reset the form',
buttonSubmitName: 'Save the form',
buttonNextName: 'Next page',
buttonPrevName: 'Prev page',
buttonNextAlwaysEnabled: false,
pages: [
{
name: 'page_1',
title: 'Page 1',
sections: [
{
name: 'section_chk',
title: 'Prova',
rows: [
{
cells: [
{
type: 'CHECKBOX',
controlName: 'hide_section',
label: 'Hide section',
}
]
}
]
},
{
name: 'hidden_if',
title: 'Section to hide',
hidden: 'hide_section === true',
rows: [
{
cells: [
{
type: 'TEXT',
controlName: 'text_required',
label: 'Text 1',
validators: [
{
type: 'REQUIRED'
}
]
}
]
}
],
}
]
},
{
name: 'page_2',
title: 'Page 2',
sections: [
{
name: 'section_1',
rows: [
{
cells: [
{
type: 'CHECKBOX',
controlName: 'ctrlCheckbox',
label: 'Show message bo',
defaultValue: true
},
{
type: 'TEXTAREA',
cellSize: 5,
controlName: 'ctrlMessage',
label: 'Message Box',
hidden: [
'ctrlCheckbox === false'
],
validators: [
{
type: 'REQUIRED'
}
]
}
]
}
]
}
]
}
]
};
An example of how to use the component
<div *ngIf="jsonHero">
<dr-form-material [jsonForm]="jsonHero" (formSubmit)="formSubmitted=$event">
</dr-form-material>
</div>
{{formSubmitted | json}}
To build the form consult the pack @dr-angular/form-material-builder.
npm i @dr-angular/form-material-builder