-
Notifications
You must be signed in to change notification settings - Fork 556
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
@ngx-formly/json-schema #1459
Comments
@aitboudad @kenisteward I've followed your issue #1348 and I'd like to start developing on some of those things (as mentioned in my original issue description), specifically I'd need
And for those, the main issues I'm currently encountering is
I started giving a look to:
They often use a
What's your opinion on this? |
The main issue here is there is no concept of a "layout.json" yet. This
I'd something I've been looking into adding for the json-schema generations
for the past month. I've gone through 1 or 2 partial iterations and am
formulating a plan for it. I can post my findings here or start a new issue
for it
I've also taken some inspiration from
Angular6-json-schema-form.
The biggest issue with that project is it is not maintained.
Once we have the concept of the layout.json in formly ( which awkwardly
enough can technically be a formly config ) we can use that while parsing
the fields to define formgroup layouts and special options like the one you
stated.
…On Thu, Mar 7, 2019, 8:23 AM Juri Strumpflohner ***@***.***> wrote:
@aitboudad <https://github.com/aitboudad> @kenisteward
<https://github.com/kenisteward> I've followed your issue #1348
<#1348> and I'd like to
start developing on some of those things (as mentioned in my original issue
description), specifically I'd need
- dynamic select boxes/autocompletes (i.e. where the data is fetched
on the fly by giving it a source URL to the API)
- datepickers
And for those, the main issues I'm currently encountering is
1. where to define the "widget" to use, i.e. <select> or some custom
autocomplete, basically what would then translate to some formly type.
2. where to put custom attributes, like the source (or how you'd call
it) property that specifies the URL where to fetch the entries for the
select box
I started giving a look to:
- https://mozilla-services.github.io/react-jsonschema-form/
- http://guillotina.io/ngx-schema-form/dist/ngx-schema-form/json
They often use a widget property, which seems to be custom though, as I
couldn't find it in the spec. We had a similar strategy, like for mapping
an autocomplete of people like
{
"title": "test",
"type": "object",
"properties": {
"personId": {
"type": "integer",
"title": "Owner",
"widget": {
"type": "autocomplete",
"source": "/api/options/people.json"
}
}
}
}
Validating it against this validator https://www.jsonschemavalidator.net/
seems to work and be valid.
What's your opinion on this?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#1459 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AMPLtWJ7GJuiHdDPBeTnQqLAUKm_8NEEks5vUSDjgaJpZM4bir7f>
.
|
Also one of the key things I wanted to do was to make sure we started with
the separate layout.json and allowed it to be combined later.
Also one of the issues with the form given now is that you can't make
arbitrary wrapper elements in that form. You can only define fields for
elements. Defining arbitrary wrapper elements for grouping of elements is
basically a must have.
…On Thu, Mar 7, 2019, 8:30 AM Kenneth Steward ***@***.***> wrote:
The main issue here is there is no concept of a "layout.json" yet. This
I'd something I've been looking into adding for the json-schema generations
for the past month. I've gone through 1 or 2 partial iterations and am
formulating a plan for it. I can post my findings here or start a new issue
for it
I've also taken some inspiration from
Angular6-json-schema-form.
The biggest issue with that project is it is not maintained.
Once we have the concept of the layout.json in formly ( which awkwardly
enough can technically be a formly config ) we can use that while parsing
the fields to define formgroup layouts and special options like the one you
stated.
On Thu, Mar 7, 2019, 8:23 AM Juri Strumpflohner ***@***.***>
wrote:
> @aitboudad <https://github.com/aitboudad> @kenisteward
> <https://github.com/kenisteward> I've followed your issue #1348
> <#1348> and I'd like to
> start developing on some of those things (as mentioned in my original issue
> description), specifically I'd need
>
> - dynamic select boxes/autocompletes (i.e. where the data is fetched
> on the fly by giving it a source URL to the API)
> - datepickers
>
> And for those, the main issues I'm currently encountering is
>
> 1. where to define the "widget" to use, i.e. <select> or some custom
> autocomplete, basically what would then translate to some formly type.
> 2. where to put custom attributes, like the source (or how you'd call
> it) property that specifies the URL where to fetch the entries for the
> select box
>
> I started giving a look to:
>
> - https://mozilla-services.github.io/react-jsonschema-form/
> - http://guillotina.io/ngx-schema-form/dist/ngx-schema-form/json
>
> They often use a widget property, which seems to be custom though, as I
> couldn't find it in the spec. We had a similar strategy, like for mapping
> an autocomplete of people like
>
> {
> "title": "test",
> "type": "object",
> "properties": {
> "personId": {
> "type": "integer",
> "title": "Owner",
> "widget": {
> "type": "autocomplete",
> "source": "/api/options/people.json"
> }
> }
> }
> }
>
> Validating it against this validator https://www.jsonschemavalidator.net/
> seems to work and be valid.
>
> What's your opinion on this?
>
> —
> You are receiving this because you were mentioned.
> Reply to this email directly, view it on GitHub
> <#1459 (comment)>,
> or mute the thread
> <https://github.com/notifications/unsubscribe-auth/AMPLtWJ7GJuiHdDPBeTnQqLAUKm_8NEEks5vUSDjgaJpZM4bir7f>
> .
>
|
that's a good news, my thought about this part can be found here #1056 (comment)
the majority of use-cases, except two parts which are mentioned in the V6 roadmap:
|
If ur ok, let's post here and use this as the main discussion issue around evolving the json-schema part of formly (if also @aitboudad agrees).
Ya, I've quickly seen that one too. Well, if it is not maintained, we might take inspiration from their ideas and port it over.
Sounds good for me, would love to get some more insight in your ideas.
💯 agree. |
@aitboudad how would you implement the "widget" scenario though? Like distinguishing between an autocomplete, date picker,...? |
If I'm not mistaken that would be solved by |
Yep I've seen the usage of Do you have any prefs on how that |
The more we're in line with the existing solution the more is better but always keep it simple, mySchema = {
"properties": {
"pageContent": {
"type": "string",
"description": "Page content",
"widget": {
"type": "select",
"templateOptions": {
...
}
}
}
}
} well if that is allowed, it can be implemented easily by merging the converted field with the |
Agree 👍 . @kenisteward any insights from your part? Otherwise I'll provide a PR with a 1st implementation of the the |
https://www.jsonschemavalidator.net/ is a reference to using schema 7 spec. In that, you are allowed to have any additional properties based on the base schema spec for a jsonSchema. That is why it doesn't fail.
The proper utilization for what should be returned in a schema is defined here: This basically states that a value will be oneOf these schemas which are represented by const/title combination. Other libraries implement this as should we. This allows for your schema to define what your select list options should be. is an example of the idea in angular6-json-schema-form The reason I bring this up is what you could do is for the field add a $ref link to get a "schema" that is dynamically generated based on the values you want it in. That way when the fields are being built from the schema we can have them there. If your use case is for live updates as they type though then we'd just have to implement it in the field like you have it.
I'm not sure currently how we can use this setup to allow arbitrary wrappers for fields. Adding the widget option would 100 percent allow us to have layout information for specific fields but I don't think it allows us to say: with this example schema: {
"$schema": "http://json-schema.org/draft-07/schema#",
"type": "object",
"properties": {
"first_name": { "type": "string" },
"last_name": { "type": "string" },
"address": {
"type": "object",
"properties": {
"street_1": { "type": "string" },
"street_2": { "type": "string" },
"city": { "type": "string" },
"state": {
"type": "string",
"enum": [ "AL", "AK", "AS", "AZ", "AR", "CA", "CO", "CT", "DE",
"DC", "FM", "FL", "GA", "GU", "HI", "ID", "IL", "IN", "IA",
"KS", "KY", "LA", "ME", "MH", "MD", "MA", "MI", "MN", "MS",
"MO", "MT", "NE", "NV", "NH", "NJ", "NM", "NY", "NC", "ND",
"MP", "OH", "OK", "OR", "PW", "PA", "PR", "RI", "SC", "SD",
"TN", "TX", "UT", "VT", "VI", "VA", "WA", "WV", "WI", "WY" ]
},
"zip_code": { "type": "string" }
}
}
},
"required": [ "last_name" ]
} Say: I want to put first_name and last_name with address.street_1 on the same row I think with formly, you normally have to create those "wrapper container" formgroups by hand and put what fields you want to in them (I did this with the first iteration of the form maker I'm trying internally). Sorry for the wall of text :( |
well it can be done :) here is an early implementation: https://stackblitz.com/edit/angular-rbv4qw |
in the end, I think we should provide both ways because for a large form it's better to separate your UI config from your schema. |
@aitboudad THIS IS EVIL MAGIC SORCERY AND I LOVE IT! I'm all for this type of layout.json. If I understand this correct, we could also set a formly wrapper component set and have it generically handle making "sections". I see you just used a class here to get the point across and it looks great! The only thing that was throwing me off is that in the schema that was input into the
100% agree. I'm personally working on multiple large form sets and have had to split them down and found it easier to work on with the two separate. |
Awesome guys 🎉. So I guess we can agree on the Thx for now :) |
https://json-schema.org/understanding-json-schema/structuring.html https://json-schema.org/latest/json-schema-core.html#rfc.section.8.3 This is something else I thought we want to make sure we support. Right now, the implementation knows nothing of $ref ( local or external reference ) the spec right now states that if $ref is found all of the validation keys ( type, minlength, maximum etc) should be pulled from ref and ignored in the schema referencing it. Annotations like $comment , title, description etc don't have to be. Different forms validators handle it differently. Also in spec 8 (coming soon) there will be a definition for saying which pieces in a ref you want to take ( I think ). |
Alright, so I started implementing the select with dynamic data. @aitboudad I like the "MAGIC SORCERY" (as @kenisteward called it 😄 ) from your example. I'd add the..
...part into the current
The main reason is to allow having other configs in the
That way, Formly automatically merges the select configuration, and after that I check for the Another point: What do you think about changing the current signature of the
..where the
That allows to hook that in and get called back by Formly for each field config. Basically the This gives you full flexibility to hook into the mapping process if needed. Any thoughts on this? |
me too, that comment is much magic too 😄
it makes sense
I'm ok with that but I would prefer the following signature instead, to allow adding more options if needed. toFieldConfig(jsonSchema: JSONSchema7, options: { mapFn?: mappingCallbackFn}): FormlyFieldConfig {
} |
Oh yes absolutely 👍 I'll submit a PR once I have it. (working on it again tomorrow probably) |
What about allowing a value to be validated against multiple criteria at the same time. https://json-schema.org/understanding-json-schema/reference/combining.html
Or |
@Adam-Michalski not yet, based on the provided description it shouldn't be hard to implement using the I'll try to provide an example when time allows. |
Updated the summary of this issue :) to track all remaining features. Once done with the remaining part, in <formly-json-schema [schema]="schema" [uiSchema]="uiSchema" [options]="options">
<formly-json-schema> |
Would this issue be related to the error below? zone-evergreen.js:171 Uncaught Error: [Formly Error] There is no type by the name of "object" On the docs website object is being used. However, on my local when I use it I see that an error is thrown because object is not a valid type. |
@classifieds-dev you may need to register |
Ah… thanks. That looks like the missing piece. |
It doesn't look there is a release of this module yet. So it looks like I need to create my own module for now and copy over whatever I need and register it in the root right? |
@classifieds-dev yep, but the plan is to provide those types out of the box! |
This sounds awesome, I'm happy to take a shot at implementing that. Does that mean we need to implement those json-schema related types for each of the UI libs we support? |
@beeman Well we can start with the basic types already my main idea is to use the existing UI. Example: FormlyModule.forChild({
types: [
{ name: 'checkbox', component: FormlyFieldCheckbox },
+ { name: 'boolean', extends: 'checkbox' },
],
}), Note: use |
@aitboudad that looks great! I've started with the checkbox in this PR: #2232 I'd love to get some feedback. If this is the way to go, I'll create a similar commit for each of the basic types. |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
What version of JSONSchema is this PR addressing and what schema versions are currently supported in V5? |
@ceelian |
Looking to use json schema format to use a date picker. Anything I can do to help progress efforts toward the ability to use Date-picker from a json schema |
So from the example that I found in the docs (https://stackblitz.com/angular/qkjrkdnqymvb?file=src%2Fapp%2Fobject.type.ts) I get the feeling that there is still a lot of setup and stuff to be done before being able to use formly 'out of the box' with JSON schema. Is it planned to include all these setup components etc in the core library so we don't have to do this ourselves? For now it's just sad to see that there is so much setup code required. |
What exactly do you mean by setup code?
It doesn't seem to need any more than a regular setup for firmly would need.
…On Mon, Oct 5, 2020, 10:44 AM Jelle den Burger ***@***.***> wrote:
So from the example that I found in the docs (
https://stackblitz.com/angular/qkjrkdnqymvb?file=src%2Fapp%2Fobject.type.ts)
I get the feeling that there is still a lot of setup and stuff to be done
before being able to use formly 'out of the box' with JSON schema. Is it
planned to include all these setup components etc in the core library so we
don't have to do this ourselves?
For now it's just sad to see that there is so much setup code required.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#1459 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ADB4XNM7LZIQD6XS6NORIGTSJHSWJANCNFSM4G4KX3PQ>
.
|
Hi, first of all, thank you for this awesome package! Not to sound rude but is there any eta on the resolving remote json-schema refs feature? I'll be waiting patiently :) |
@GertjanJ I had come up with a quick and dirty localized solution that I didn't want to share here yet. Now that' we are officially in production I'll see about adding it. @aitboudad I may need some guidance on how you want to make use of async/await for remote references. If we leave it in the service it's fine because we can just convert that one function (from the json schema service) but if we move processing to the component it makes for uglier solutions. |
@kenisteward just go with the service solution |
Happy coding! |
How to have a custom validator in JSON SCHEMA |
Dependency custom validator |
I intend to leverage the capabilities of I am reaching out to express my interest in utilizing Although the library has fulfilled most of the standard's requirements, I have observed that there has been no progress on the related ticket for some time. Furthermore, after thoroughly reviewing all comments associated with this ticket, I am confident that your impressive service can enable us to implement the full standard. In order to proceed, it would be immensely helpful to have detailed documentation that covers all aspects discussed in the ticket. Specifically, the mapping function, which facilitates custom manipulations of data, would be especially useful. |
@HaidarZ Thanks for you feedback, we're aware of that, the progress is a little slow but its better than nothing. Also we would appreciated any help toward improving the doc and PR welcomed! |
My project needs support for contentMediaType = I understand that this capability is yet to be implemented. Is this the right issue for this request or should I open a new issue? |
1. Progress of supported schema:
minLength
,maxLength
)pattern
)multipleOf
)minimum
,exclusiveMinimum
,maximum
andexclusiveMaximum
)minimum
andmaximum
exclusiveMinimum
andexclusiveMaximum
title
,description
,default
)if
,then
andelse
)2. add
@ngx-formly/json-schema
3.Docs
The text was updated successfully, but these errors were encountered: