[Q] About nested objects

[trsh]

A common problem with such libraries is if you have type object inside type object. The parent is NOT required, but child has required properties, then it cries about those required fields. Nerveless I would have to have a choice to not touch the parent object at all, as it is not required. Doe's this lib handle it some-have?

https://json-editor.github.io/json-editor/ handles it, by default not showing NOT required object. When you choose to add (check) them, then the underlying logic and requirements become active.

[WhileTrueEndWhile]

Do you have an example?

To hide fields, see: https://github.com/makinacorpus/ngx-schema-form#user-content-conditional-fields

Please note that you can use GIST to bind any schema to the demo page (Load schema from URL): https://makinacorpus.github.io/ngx-schema-form/dist/ngx-schema-form/

Do not let the default behavior of the forms unsettle you. All form fields are displayed as invalid if the entire form is invalid. This can be fixed by CSS or adaptation of the templates...

---

BTW: @ebrehault Why is "has-error" and "has-success" still at the top level, which causes this strange behavior? https://github.com/makinacorpus/ngx-schema-form/blob/master/projects/schema-form/src/lib/formelement.component.ts#L19

[trsh]

@WhileTrueEndWhile

The example > https://gist.githubusercontent.com/trsh/b710a2ed982c4064c06c4d0fae7cd5e4/raw/a5fedce98aa2647e2e40b621eb5ddaada2631352/json

P.S I can not test it fully, as this demo doesn't include validation

To hide fields, see: https://github.com/makinacorpus/ngx-schema-form#user-content-conditional-fields

Even if is set it invisible, etc:

1) Will the validator not spit out the error anyways? 2) I don't rally want to add that additional field to every such situation :/ 3) visibleIf is not an offical param of JSON schema, so I one day I switch libraries this will be all for nothing. I will need a cleanup.

[trsh]

But the idea remains. The default behavior should be that I do not get any errors about 'y', as I can skip whole 'x' object (unless I chose to USE it), as IT is not required.

Ideally not required objects/whatever should be Hidden by default, and addable visa some checkbox.

If you check https://json-editor.github.io/json-editor/ -> Location -> Properties, u will see the idea.

[WhileTrueEndWhile]

I have received feedback from the authors regarding their own use of the library. They handle it like me and process the schema before. You can use the official "dependencies" (https://json-schema.org/understanding-json-schema/reference/object.html#property-dependencies) in your source files and convert it into a "visibleIf" using a tree algorithm (if + recursion)...

[trsh]

@WhileTrueEndWhile still its a workaround. Requires unnecessary boilerplate (the conditional field) and +1 JSON scan. If we want to make this library better, why do not stare indirection of https://json-editor.github.io/json-editor/ idea for this and make optional objects choosable in-the-box. I tested my example in https://www.jsonschemavalidator.net/ with schema 4 and doesn't give errors, so it's just a matter of UI implementation. And it's smart overall not to Bombard end-user with non-required meters of fields.

[WhileTrueEndWhile]

You seem to have a good attitude. You could use your own widget registry to customize the template for objects and check there in the "*ngFor" whether the form property is optional and is empty/null... If this is the case, you can bind the CSS class "hidden" to the form control. Then you could create a dropdown (in the same template), which sets a temporary state (and also sets the form property to "null" if it is already displayed)...

[class.hidden]="optional and empty and not temporary visible"

I like the idea of hiding optional fields, but as you can see this library is not optimized for UX. It is also difficult to say what is good for "everyone". For example, I have adapted all the templates I use... If it works, I don't think there's anything wrong with a pull request :)

---

See:

• Custom Widgets
• Default Object Widget
• Indicate Required Fields
• Bootstrap Dropdown

[trsh]

@WhileTrueEndWhile right after writing my last post, I started looking into widgets. I don't fully get how they work. From the example, how will this lib understand and read ang.material formControl ? Or if make a custom widget Im responsible for handling validation and collecting data?

[trsh]

I mean from standard input Lib just takes xxx.value, from <mdl-textfield with formControl it's much complicated matter, so how in hell it suppose to work :D ??

Upd

I checked the default widgets's and I think I partly Understand. I guess [formControl]="control" [attr.name]="name" are mandatory, and The lib will take from there. But the doc part is then poorly written.

[WhileTrueEndWhile]

Take it as it is. There are many possibilities in Angular. You can also address FormControl manually in event handlers. Try adding "[class.hidden]="xxx" to "sf-form-element" (inside of "'*ngFor"). If there are problems, I'll try to help. Have you already got your own widget registry?

[daniele-pecora]

Take a look at this example of a custom UI Widget Library at Stackblitz.

Can this be closed due to lack of activity?