devextrem-dynamic-form is library build for angular applications that helps to build and generate forms using un simple class and some decorators
The package can be installed via NPM :
npm install --save devextreme-dynamic-form
If you are already using devextreme in your angular project, you don't need to add anything, just install it and enjoy it
Devextreme don't configured yet
if you are not using devextreme in your angular project, you have to add those two dependencies :
npm install --save devextreme devextreme-angular
then, in your
angular.json (angular-cli.json), add the
theme you want to use, for example :
You will need to also to add this in your tsconfig.json
. In order to use this component, you need first to import
DxDynamicFormrmModule in your app.module, or the module that will be holding this component :
. Create a class, for example
Test and decorate all your attributes with annotations (decorators):
And create a ts file where you export all classes from witch you want to generate a form, lets call it handler.ts, in our case, it will contain only this line:
handler.ts will be used to instantiate the forms'classes.
. In your app.component.ts, import
handler.ts content :
;;...@@ dxDynamicForm : DxDynamicFormComponent;handlerInst = handler;...
handlerInstwill be passed as an
@Input() param to dx-dynamic-form
. In your app.component.html, just add the selector tag of the library with some input parameters :
. Finally, if you wana retreive selected or introduced datas of the form, you have to call generateDataToSend method line this :
this method will first check if the form is
valid, if it's not, it return an empty array, and
display alerts in fields in which there a validation error.
this project is based on devextreme modules, an incredible cross-platform component containing everything you need to create responsive web apps.