Change the default html template angular-schema-form generates

[tivie]

Enhancement

angular-schema-form is very opinionated in the HTML it generates, and it's very limited in the way the output form can be customized.

jsonform library has a schema property called params that lets you apply fieldHtmlClass and htmlClass property to all form fields at once (which, as far as i can tell, is missing from angular-schema-form`)

This makes it very hard to properly customize the appearance of the form. For instance, I couldn't find a way to place the labels inline with the inputs, using the "bootstrap way":

<div class="form-group row">
    <label class="control-label col-sm-2 col-form-label">my label</label>
    <div class="col-sm-10">
        <input ...>
    </div>
</div>

I think this problem could be solved if it would be possible to pass a predefined generic template (with placeholders) that all fields would implement.

[Anthropic]

@tivie have you looked at how add-ons work? You can make your own templates for any field type you like, for example I had a user ask about validating an object using oneOf and showed how it could be done with this plunker: https://plnkr.co/edit/WN2TV5b1ujJItf2f8IJj?p=preview Look at the oy-inline add-on file for how to inject templates. And css for making the fields inline.

You can make an add-on that will provide any template features you like.

[tivie]

@Anthropic thank you very much for your quick response and hard work.

I did look into how addons work, but as I understood them, you can't define a generic template that all forms inputs inherit from. But I checked your plunkr and maybe I misunderstood the documentation. I will let you know :)

[Anthropic]

@tivie the 'trick' in this case is to apply the inline requirement to the parent and just group the fields within it rather than try to affect each individual field. By adding a class to the grouping element it gives you all you need to manipulate the display of the children per group :)

[Anthropic]

Closing this for now, let me know if you have any further requirements you need to resolve :)

Please comment if you want to re-open or do not feel the question has been answered sufficiently.

[tivie]

I ended up forking angular-schema-form-bootstrap and made crude changes to the templates to fit my needs. To be honest, I got lazy and that was the fastest way to accomplish what I needed.

[Anthropic]

That's fine, the decorators are there for just that, I do exactly the same for my work projects. There's always a need for work specific decorator behaviours. That's why I started the Material design one, for a project that needed to be different. :)