ngx-schema-form-widgets-material
v9.0.76
Published
Easy build forms based on JSON Schema.
Downloads
92
Readme
Ngx Schema Form UI Material Library
Easy build forms based on JSON Schema.
This lib provides widgets based on Angular Material.
This widget are used within a form generated by the ngx-schema-form-view project.
Preview
A tiny impression of a preview. See some preview images
DEMO
See a demo application click here
Usage
Install dependencies:
$ npm install ngx-schema-form ngx-schema-form-view ngx-schema-form-widgets-material --save
Register the module UIWidgetsMaterialModule
into your module declaration
and register the registry as provider
@NgModule({
// ..
imports: [
//...
, SchemaFormModule.forRoot()// ngx-schema-form
, UIFormViewModule.forRoot()// ngx-schema-form-view
, UIWidgetsMaterialModule // ngx-schema-form-ui-material
],
providers: [
{provide: WidgetRegistry, useClass: WidgetRegistryMaterial}, // the ui widget registry
{provide: SchemaValidatorFactory, useClass: FixOptionalEmptyFieldsZSchemaValidatorFactory} // enhanced validator
],
// ..
})
Install some style customizations in your angular.json
"styles": [
"src/styles.css",
"node_modules/ngx-schema-form-widgets-material/ngx-schema-form-widgets-material.css"
]
Install grid style from primeng in your angular.json
"styles": [
"src/styles.css",
"node_modules/ngx-schema-form-widgets-material/primeng-ui-g.css"
]
Import your default material css
/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
Widget Library Documentation
Head over to the library documentation README.MD (Not Yet :-( )
Unfortunately this projects lacks of a documentation.
To see how to use any of this widget head over to the source code of the widgets html templates
- array
- autocomplete
- bbcode
- button
- captcha
- checkbox
- date
- dialog
- file
- form
- html
- integer
- message
- messages
- object
- osm
- progress
- qrcode
- radio
- range
- section
- select
- select-button
- select-card
- string
- switch
- table
- textarea
- wizard
Development
To generate all *.js
, *.d.ts
and *.metadata.json
files:
Live preview
Try it out in the demo app
$ ng build --prod ngx-schema-form-widgets-material
$ npm start
Build library
$ ng build --prod ngx-schema-form-widgets-material
or use the shortcut npm run build:lib
Deploy library
$ ng build --prod ngx-schema-form-widgets-material && \
cd dist/ngx-schema-form-widgets-material && \
npm pack \
&& cd -
or use the shortcut $ npm run deploy:lib