Generate forms from JSON Schema

[Koslun]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x ] feature request
[ ] support request

Current behavior

If you want to dynamically create forms from JSON saved in your database you currently need to define each field specifically for this form.

Expected behavior

For just a form with validation and some basic vertical layout you add a JSON schema containing all the fields in the forms and how they should be validated. Where validation could either be done through Angular Reactive forms or using a JSON schema validator like ajv.

Minimal reproduction of the problem with instructions

There are a few other Angular form libraries similar but less popular and stable that instead use JSON schema's

• https://github.com/makinacorpus/ngx-schema-form
• https://github.com/dschnelldavis/angular2-json-schema-form

Also some older but more popular versions in Angular.js, JQuery and React versions.

What is the motivation / use case for changing the behavior?

JSON schema's can be used for validation on the server, be it through ajv when accepting the request from the client or using JSON schemas for validation in MongoDB.

More than anything it's also a standardized way to describe objects and validation so there might be some already familiar with how to do it using this format.

Our particular use-case has been crafting dozens of smaller forms with JSON schema's. Using angular2-json-schema-form for a while now to create forms from them. But with that library being a bit unstable and showing very little progress we're considering our options between trying to support further development of that library or moving over to another library, like this library.

Is this a feasible direction for this library to go towards? And are you interested in taking it down that path? As an alternative to the current structure. And in either case, would PRs to implement this functionality be accepted (given acceptable quality)?

An alternate solution, if the answer is no, would be to try to make some kind of logic that converts JSON schema to the format you use in this library. As it stands we'd probably take some time to investigate that option further.

Either way, very impressed by this library 🙂.

[aitboudad]

Is this a feasible direction for this library to go towards?

well I think providing a converter would be enough.

PR welcomed,
it shouldn't be difficult to implement a such feature :),
here is quick attempt https://stackblitz.com/edit/angular-bwt5jb for starting, it's up to you now!

[aitboudad]

in order to keep it simple, starting by a simple converter (like I did in the above example) to the format we use would be enough, I think!

[Koslun]

@aitboudad awesome and yes, think a converter would be a good start.

Will have a look at how this library works and JSON-schema's in general a bit more closely and try to iterate on this then :).

[kenisteward]

I'm currently working on a generic implementation of said converter for an internal project. I'd love to contribute to this whenever we get more complete functionality.

Do you have have any suggestions as I work on it on how we should incorporate it into the library (ngx-formly) itself? right now we have an external angular service that converts to formly config so if we want to use something other than json-schema at some point we can.

Thanks

[samtsai]

Interestingly, I have an internal project with similar goals. I have some additional use cases I'm trying to accomplish as well:

• merge in translated field descriptors (e.g. label, placeholder, etc) via i18n service
• load in data options for given fields (so far I'm modeling this after ngx-translate and having a separate source for data options (e.g. countries.json)
• pre-populate model if data exists (this will just work OOTB)

The project is currently on hold but I will report back with some developments.

[Koslun]

@kenisteward For now I was thinking of developing something similar as well. A service which can convert JSON-schema to a config you can plug into this library. Where specifically I think the ultimate goal would be to meaningfully support all of the current version, draft-07. But a smaller subset might be fine as a start.

Either way I agree that it would be interesting to know the desired format for the contribution so that we could maybe start on a PR. I suggest a service named JSONSchemaConverterService with one public method which takes in a JSONSchema and returns an object with various fields for the inputs required to create a corresponding form. Would also throw in some unit tests to test various different JSONSchema features.

Assume this JSON-schema logic should be in the core package but can also imagine that it could be worthwhile to split it into a separate json-schema package. Where we could then mark json-schema as experimental and more easily load less code if we're not using the JSON-schema converter. Could also easily opt to lag behind in updating the JSON-schema support and in general avoid this blocking the rest of the library in any way. So think in general it would be a good idea to split this into a separate package but just putting it in core would make sense to me as well.

@samtsai Including internationalization through ngx-translate is also a goal we have, so would be interested in collaborating on this as well.

A few things came up so might take a week or so for me to really get into this but still interested in pitching in. Before I, or anyone else, creates a PR it would however be good to get some feedback on the format.

[aitboudad]

just added an initial work in #1085 which cover the basic usages (80%) see the demo https://stackblitz.com/edit/angular-xvevwe

[kenisteward]

@aitboudad would you like me to work with you on this to cover the rest of the cases?

[aitboudad]

initial support landed in 5.0.0-alpha.2, I've decided to follow https://mozilla-services.github.io/react-jsonschema-form/ which contains lot of examples that we can use in our demo examples
the array type is partially supported for now and since I'm not using jsnon-schema I would like to leave that part to anyone interested!

the first step is to add a unit test for FormlyJsonschema service.

@kenisteward yes I'm waiting your PRs and anyone willing to participate :)

[kenisteward]

@aitboudad do the changes that were implemented handle most of draft 7 or 8? Just checking for future reference.

[aitboudad]

@kenisteward that was based on draft 7, the features that are handled are:

• Validation:
  • minLength
  • maxLength
  • pattern
  • required
• Attr:
  • default
  • title
  • readonly
  • description
• Types:
  • string
  • boolean
  • number
  • integer
  • object
  • array
  • enum

[kenisteward]

@aitboudad for my use case I'm going to require custom validation (e.g. confirm password example here https://mozilla-services.github.io/react-jsonschema-form/#eyJmb3JtRGF0YSI6eyJwYXNzMSI6InRoZXBhc3MiLCJwYXNzMiI6InRoZXBhc3MifSwic2NoZW1hIjp7InRpdGxlIjoiQ3VzdG9tIHZhbGlkYXRpb24iLCJkZXNjcmlwdGlvbiI6IlRoaXMgZm9ybSBkZWZpbmVzIGN1c3RvbSB2YWxpZGF0aW9uIHJ1bGVzIGNoZWNraW5nIHRoYXQgdGhlIHR3byBwYXNzd29yZHMgbWF0Y2guIiwidHlwZSI6Im9iamVjdCIsInByb3BlcnRpZXMiOnsicGFzczEiOnsidGl0bGUiOiJQYXNzd29yZCIsInR5cGUiOiJzdHJpbmciLCJtaW5MZW5ndGgiOjV9LCJwYXNzMiI6eyJ0aXRsZSI6IlJlcGVhdCBwYXNzd29yZCIsInR5cGUiOiJzdHJpbmciLCJtaW5MZW5ndGgiOjV9LCJhZ2UiOnsidGl0bGUiOiJBZ2UiLCJ0eXBlIjoibnVtYmVyIiwibWluaW11bSI6MTh9fX0sInVpU2NoZW1hIjp7InBhc3MxIjp7InVpOndpZGdldCI6InBhc3N3b3JkIn0sInBhc3MyIjp7InVpOndpZGdldCI6InBhc3N3b3JkIn19fQ== ) do we want this in iteration 1?

also i'm currently not getting errors for the stackblitz you shared when i use something other than a number or for the required. This is what we want to make sure is handled for iteration 1 correct?

[aitboudad]

custom validation not implemented yet and the stackblitz example is outdated, the latest version can be found in the following link: https://formly.dev/examples/advanced/json-schema

[kenisteward]

@aitboudad do we want custom validation in iteration one? Should I worry about implementing it? Do you have an idea of how you want it done for the service? I ask because I'm trying to avoid double work (implementing my version of custom validation then later having to restructure for this library's formal version of it)

[aitboudad]

it's all about experiment, implement your version and when you think it's good enough to be part of the core then send a proposal.

[kenisteward]

@aitboudad As an update for custom validations I'm currently following
https://github.com/json-schema-org/json-schema-spec/issues/549 and I'm going to try to contribute there to see if there is a more standard way for custom validation. If implemented now, we'd have to add a "validation.json" for generating validations to the server via asyncValidators or cross field via validators and the model.

It looks like it will be in spec 09 or so. I'm hoping to implement extension earlier as I need this feature in jsonSchema basically yesterday. In the meantime, since I've finally been properly assigned to our project for handling forms generation in house I can work on the current array implementation / unit tests.

[aitboudad]

a little progress in json-schema is landed in v5.3 release 🎉!