json-schema-form / angular-schema-form

Generate forms from a JSON schema, with AngularJS!
https://json-schema-form.github.io/angular-schema-form
MIT License
2.47k stars 653 forks source link

Best practice for using multiple decorators for the same field type within a single app? #810

Closed zfarrell closed 7 years ago

zfarrell commented 7 years ago

I'm sure i'm just overlooking this somewhere, but i can't seem to find it documented anywhere...

I would like to use multiple decorators for the same field type (but for different forms).

As a simplistic example, say that i have two forms: Form A and Form B:

<form 
    name="formA"
    sf-schema="schemaA"
    sf-form="['*']"
    sf-model="schemaModelA">
</form>

<form 
    name="formB"
    sf-schema="schemaB"
    sf-form="['*']"
    sf-model="schemaModelB">
</form>

In formA i want to display checkboxes using a custom template (arbitrarily picking one here, but in reality there's likely several). I've created a decorator that properly configures this and it works.

However, in formB i want checkboxes to just use the bootstrap decorator.

How can i have two separate forms use different decorators for the same field type?

The best i can come up with is to create a unique field type. E.g. instead of boolean, it would be boolean-custom. Is there a different way to handle this?

Thanks in advance!

zfarrell commented 7 years ago

I think i found what i was looking for, sf-use-decorator.

For those that it might help in the future:

The decorator(s) you're using have names, e.g. schemaFormDecoratorsProvider.defineDecorator('bootstrap', {.. schemaFormDecoratorsProvider.defineDecorator('myCustomDecorator', {..

Extending the example from above, you could explicitly choose one of the decorators like this:

<form 
    name="formA"
    sf-schema="schemaA"
    sf-form="['*']"
    sf-model="schemaModelA"
    sf-use-decorator="bootstrap">
</form>

<form 
    name="formB"
    sf-schema="schemaB"
    sf-form="['*']"
    sf-model="schemaModelB"
    sf-use-decorator="myCustomDecorator">
</form>