Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

class binding with options?.fieldHtmlClass #221

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .angular-cli.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "angular2-json-schema-form"
"name": "ng-json-schema-form"
},
"apps": [
{
Expand Down
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ typings
.firebaserc
firebase.json
firebase-debug.log
yarn-error.log

# e2e
e2e/*.js
Expand Down
12 changes: 6 additions & 6 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Contributing to Angular JSON Schema Form
# Contributing to NG JSON Schema Form

We would love for you to contribute to Angular JSON Schema Form!
We would love for you to contribute to NG JSON Schema Form!
Here's more information about how to contribute:

- [Issues and Bugs](#issue)
Expand Down Expand Up @@ -33,12 +33,12 @@ This library is released under the [MIT](https://opensource.org/licenses/MIT) Li
## <a name="coc"></a> Code of Conduct
Be courteous to other people. If you're not sure how to do that, please read and follow our [Code of Conduct][code-of-conduct].

[new-issue]: https://github.com/dschnelldavis/angular2-json-schema-form/issues/new
[pull-requests]: https://github.com/dschnelldavis/angular2-json-schema-form/pulls
[github]: https://github.com/dschnelldavis/angular2-json-schema-form
[new-issue]: https://github.com/shamoons/ng-json-schema-form/issues/new
[pull-requests]: https://github.com/shamoons/ng-json-schema-form/pulls
[github]: https://github.com/shamoons/ng-json-schema-form
[js-style-guide]: https://google.github.io/styleguide/jsguide.html
[jsfiddle]: http://jsfiddle.net
[plunker]: http://plnkr.co/edit
[runnable]: http://runnable.com
[stackoverflow]: http://stackoverflow.com/questions/tagged/angular2-json-schema-form
[code-of-conduct]: https://github.com/dschnelldavis/angular2-json-schema-form/CODE_OF_CONDUCT.md
[code-of-conduct]: https://github.com/shamoons/ng-json-schema-form/CODE_OF_CONDUCT.md
40 changes: 20 additions & 20 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# Angular JSON Schema Form
# NG JSON Schema Form

[![npm version](https://img.shields.io/npm/v/angular2-json-schema-form.svg?style=plastic)](https://www.npmjs.com/package/angular2-json-schema-form) [![npm downloads](https://img.shields.io/npm/dm/angular2-json-schema-form.svg?style=plastic)](https://www.npmjs.com/package/angular2-json-schema-form) [![GitHub MIT License](https://img.shields.io/github/license/dschnelldavis/angular2-json-schema-form.svg?style=social)](https://github.com/dschnelldavis/angular2-json-schema-form)
[![Dependencies](https://david-dm.org/dschnelldavis/angular2-json-schema-form.svg)](https://david-dm.org/dschnelldavis/angular2-json-schema-form) [![devDependencies](https://david-dm.org/dschnelldavis/angular2-json-schema-form/dev-status.svg)](https://david-dm.org/dschnelldavis/angular2-json-schema-form?type=dev)
[![npm version](https://img.shields.io/npm/v/ng-json-schema-form.svg?style=plastic)](https://www.npmjs.com/package/ng-json-schema-form) [![npm downloads](https://img.shields.io/npm/dm/ng-json-schema-form.svg?style=plastic)](https://www.npmjs.com/package/ng-json-schema-form) [![GitHub MIT License](https://img.shields.io/github/license/shamoons/ng-json-schema-form.svg?style=social)](https://github.com/shamoons/ng-json-schema-form)
[![Dependencies](https://david-dm.org/shamoons/ng-json-schema-form.svg)](https://david-dm.org/shamoons/ng-json-schema-form) [![devDependencies](https://david-dm.org/shamoons/ng-json-schema-form/dev-status.svg)](https://david-dm.org/shamoons/ng-json-schema-form?type=dev)

A [JSON Schema](http://json-schema.org) Form builder for Angular 4 and 5, similar to, and mostly API compatible with,

Expand All @@ -18,19 +18,19 @@ For full details, see 'To install from NPM and use in your own project', below.

## Check out the live demo and play with the examples

[Check out some examples here.](https://angular2-json-schema-form.firebaseapp.com/)
[Check out some examples here.](https://ng-json-schema-form.firebaseapp.com/)

This example playground features over 70 different JSON Schemas for you to try (including all examples used by each of the three libraries listed above), and the ability to quickly view any example formatted with Material Design, Bootstrap 3, Bootstrap 4, or without any formatting.

## Installation

### To install from GitHub

To install [the library and the example playground from GitHub](https://github.com/dschnelldavis/angular2-json-schema-form), clone `https://github.com/dschnelldavis/angular2-json-schema-form.git` with your favorite git program. Or, assuming you have [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) and [Node/NPM](https://nodejs.org/en/download/) installed, enter the following in your terminal:
To install [the library and the example playground from GitHub](https://github.com/shamoons/ng-json-schema-form), clone `https://github.com/shamoons/ng-json-schema-form.git` with your favorite git program. Or, assuming you have [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) and [Node/NPM](https://nodejs.org/en/download/) installed, enter the following in your terminal:

```shell
git clone https://github.com/dschnelldavis/angular2-json-schema-form.git angular2-json-schema-form
cd angular2-json-schema-form
git clone https://github.com/shamoons/ng-json-schema-form.git ng-json-schema-form
cd ng-json-schema-form
npm install
npm start
```
Expand All @@ -50,10 +50,10 @@ If you want detailed documentation describing the individual functions used in t

### To install from NPM and use in your own project

If, after playing with the examples, you decide this library is functional enough to use in your own project, you can [install it from NPM](https://www.npmjs.com/package/angular2-json-schema-form) using either [NPM](https://www.npmjs.com) or [Yarn](https://yarnpkg.com). To install with NPM, run the following from your terminal:
If, after playing with the examples, you decide this library is functional enough to use in your own project, you can [install it from NPM](https://www.npmjs.com/package/ng-json-schema-form) using either [NPM](https://www.npmjs.com) or [Yarn](https://yarnpkg.com). To install with NPM, run the following from your terminal:

```shell
npm install angular2-json-schema-form
npm install ng-json-schema-form
```

Then import JsonSchemaFormModule in your main application module, like this:
Expand All @@ -64,7 +64,7 @@ import { NgModule } from '@angular/core';

import {
JsonSchemaFormModule, MaterialDesignFrameworkModule
} from 'angular2-json-schema-form';
} from 'ng-json-schema-form';

import { AppComponent } from './app.component';

Expand Down Expand Up @@ -113,7 +113,7 @@ If you use SystemJS, you will also need to make the following changes to your sy

Add these lines to the 'map' section of systemjs.config.js:
```javascript
'angular2-json-schema-form': 'npm:angular2-json-schema-form/bundles/angular2-json-schema-form.umd.js',
'ng-json-schema-form': 'npm:ng-json-schema-form/bundles/ng-json-schema-form.umd.js',
'ajv': 'npm:ajv/dist/ajv.min.js',
'lodash': 'npm:lodash/lodash.min.js'
```
Expand Down Expand Up @@ -255,7 +255,7 @@ Combining inputs is useful if you have many unique forms and store each form's d

#### Compatibility modes

If you have previously used another JSON form creation library—Angular Schema Form (for AngularJS), React JSON Schema Form, or JSON Form (for jQuery)—in order to make the transition easier, Angular JSON Schema Form will recognize the input names and custom input objects used by those libraries. It should automatically work with JSON Schemas in [version 6](http://json-schema.org/draft-06/schema), [version 4](http://json-schema.org/draft-04/schema), [version 3](http://json-schema.org/draft-03/schema), or the [truncated version 3 format supported by JSON Form](https://github.com/joshfire/jsonform/wiki#schema-shortcut). So the following will all work:
If you have previously used another JSON form creation library—Angular Schema Form (for AngularJS), React JSON Schema Form, or JSON Form (for jQuery)—in order to make the transition easier, Angular JSON Schema Form will recognize the input names and custom input objects used by those libraries. It should automatically work with JSON Schemas in [version 7](http://json-schema.org/draft-07/schema), [version 6](http://json-schema.org/draft-06/schema), [version 4](http://json-schema.org/draft-04/schema), [version 3](http://json-schema.org/draft-03/schema), or the [truncated version 3 format supported by JSON Form](https://github.com/joshfire/jsonform/wiki#schema-shortcut). So the following will all work:

Angular Schema Form (AngularJS) compatibility:
```html
Expand Down Expand Up @@ -434,7 +434,7 @@ let yourNewWidgets = {
```
...or...
```javascript
import { WidgetLibraryService } from 'angular2-json-schema-form';
import { WidgetLibraryService } from 'ng-json-schema-form';
...
constructor(private widgetLibrary: WidgetLibraryService) { }
...
Expand Down Expand Up @@ -470,7 +470,7 @@ let yourCustomFramework = {
```
...or...
```javascript
import { FrameworkLibraryService } from 'angular2-json-schema-form';
import { FrameworkLibraryService } from 'ng-json-schema-form';
...
constructor(private frameworkLibrary: FrameworkLibraryService) { }
...
Expand Down Expand Up @@ -499,11 +499,11 @@ The two built-in frameworks (in the `/src/lib/src/framework-library` folder) dem

## Contributions and future development

If you find this library useful, I'd love to hear from you. If you have any trouble with it or would like to request a feature, please [post an issue on GitHub](https://github.com/dschnelldavis/angular2-json-schema-form/issues).
If you find this library useful, I'd love to hear from you. If you have any trouble with it or would like to request a feature, please [post an issue on GitHub](https://github.com/shamoons/ng-json-schema-form/issues).

If you're a programmer and would like a fun intermediate-level Angular project to hack on, clone the library and take a look at the source code. I wrote this library both because I needed an Angular JSON Schema Form builder, and also as a way to sharpen my Angular skills. This project is just complex enough to be challenging and fun, but not so difficult as to be overwhelming. One thing I particularly like is that each example in the demo playground is like a little puzzle which provides immediate feedback—as soon as it works perfectly, you know you've solved it.

I've also tried to split things into small modules as much as possible, so even though some code is still a bit messy, most individual parts should be straightforward to work with. (A lot of the code is well commented, though some isn't—but I'm working to fix that. If you run into anything you don't understand, please ask.) If you make improvements, please [submit a pull request](https://github.com/dschnelldavis/angular2-json-schema-form/pulls) to share what you've done.
I've also tried to split things into small modules as much as possible, so even though some code is still a bit messy, most individual parts should be straightforward to work with. (A lot of the code is well commented, though some isn't—but I'm working to fix that. If you run into anything you don't understand, please ask.) If you make improvements, please [submit a pull request](https://github.com/shamoons/ng-json-schema-form/pulls) to share what you've done.

This library is mostly functional (I'm already using it in another large site, where it works well), but it still has many small bugs to fix and enhancements that could be made. Here's a random list of some stuff I know needs to be added or improved:

Expand All @@ -513,13 +513,13 @@ This library is mostly functional (I'm already using it in another large site, w

* More widgets—There are lots of great form controls available, such as the [Pikaday calendar](https://github.com/dbushell/Pikaday), [Spectrum color picker](http://bgrins.github.io/spectrum), and [ACE code editor](https://ace.c9.io), which just need small custom wrappers to convert them into Angular JSON Schema Form plug-ins. In addition, there are a few additional features of HTML, JSON Schema, and Material Design which could be fixed by adding new widgets:

* [A file widget](https://github.com/dschnelldavis/angular2-json-schema-form/issues/38)—To support uploading files, this widget would display an HTML file input, and then include the uploaded file in the form's output data, as an [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsArrayBuffer) or [DataURL](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL).
* [A file widget](https://github.com/shamoons/ng-json-schema-form/issues/38)—To support uploading files, this widget would display an HTML file input, and then include the uploaded file in the form's output data, as an [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsArrayBuffer) or [DataURL](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL).

* [A oneOf widget](https://github.com/dschnelldavis/angular2-json-schema-form/issues/112)—To support schemas using oneOf or anyOf, this widget would enable a user to choose an option from a select list, which would then replace another control on the form.
* [A oneOf widget](https://github.com/shamoons/ng-json-schema-form/issues/112)—To support schemas using oneOf or anyOf, this widget would enable a user to choose an option from a select list, which would then replace another control on the form.

* [An addAdditionalProperties widget](https://github.com/dschnelldavis/angular2-json-schema-form/issues/104)—To support schemas using additionalProperties or patternProperties, this widget would enable users to enter a name to add a new property to an object, and would then add a new control to the form for setting that property's value (similar to the existing [add-reference widget](https://github.com/dschnelldavis/angular2-json-schema-form/blob/master/src/lib/src/widget-library/add-reference.component.ts)).
* [An addAdditionalProperties widget](https://github.com/shamoons/ng-json-schema-form/issues/104)—To support schemas using additionalProperties or patternProperties, this widget would enable users to enter a name to add a new property to an object, and would then add a new control to the form for setting that property's value (similar to the existing [add-reference widget](https://github.com/shamoons/ng-json-schema-form/blob/master/src/lib/src/widget-library/add-reference.component.ts)).

* [A matStepper widget](https://github.com/dschnelldavis/angular2-json-schema-form/issues/123)—To support the [Angular Material Stepper control](https://material.angular.io/components/stepper/overview) (similar to the existing [tabs](https://github.com/dschnelldavis/angular2-json-schema-form/blob/master/src/lib/src/widget-library/tabs.component.ts) widget).
* [A matStepper widget](https://github.com/shamoons/ng-json-schema-form/issues/123)—To support the [Angular Material Stepper control](https://material.angular.io/components/stepper/overview) (similar to the existing [tabs](https://github.com/shamoons/ng-json-schema-form/blob/master/src/lib/src/widget-library/tabs.component.ts) widget).

If you like this library, need help, or want to contribute, let me know. I'm busy, so it sometimes takes me a long time to respond, but I will eventually get back to you. :-)

Expand Down
Loading