feature request: custom form layout in html

[pcardune]

angular-formly already supports advanced layout options using the json configuration. I have a use case where we want to use html instead of json to do the layout, but leave everything else to formly.

The very specific use case is to render a form like this:

Hiring a new employee?
O Create New Employment Documents
→ [_] Include Offer Letter
----------------------- OR ------------------------
Adding an existing employee?
O Upload Existing Employment Documents
→ [_] Upload Offer Letter
→ [_] Upload Confidentiality Agreement
→ [_] Send Welcome Email

The two top-level radio buttons are bound to the same model attribute, and the checkboxes are subfields which only show up when you select their parent radio button. I managed to get this to work using vanilla angular-formly with custom fields and templates, but it was pretty messy, and didn't seem like a scalable approach if we had to do a lot of different sorts of similarly complicated layout customizations. Part of the issue is that the application I'm working on generates the formly json configs based on a complicated system that doesn't care about layout and doesn't provide good hooks for monkeying with the formly json configs before they get rendered.

To solve this problem for myself, I've written a library, plato-form, which replicates a number of angular-formly's features, but provides a system for writing the layout in html. You can check out the tutorial for a demonstration.

Below is an example to illustrate what the html looks like. The main idea is that rather than having to render the entire form based on the json config, you can render individual fields as you want using the pf-field directive. There are other directives for more complicated stuff described in the tutorial.

<pf-form fields="$ctrl.fields">
  <pf-field field-key="firstName"></pf-field>
  <p>
    Thanks for filling out your <strong>first name</strong>, now we would like you
    to give us your <strong>last name</strong> as well.
  </p>
  <pf-field field-key="lastName"></pf-field>
</pf-form>

I have three paths I could take at this point, which I would like some feedback on:

1. Integrate the features in plato-form directly into angular-formly and ditch the plato-form library altogether. This would make me very happy, but I would obviously need your blessings :)
2. Add some hooks in angular-formly so that plato-form doesn't have to reimplement what angular-formly already does. plato-form would then be an optional library that angular-formly users can pick up if they want to do layout in html.
3. Stop using angular-formly in my application in favor of plato-form, and try to make plato-form have feature parity with angular-formly. This would make me very sad because then I would be "competing" with angular-formly, which I don't want to do.

Thanks for reading this far!

[gillchristian]

My suggestion would be to go for the step 2. Having plato-form as optional plugin would be great!

[gillchristian]

I think this issue could be closed since the PRs are merged already! @kentcdodds

[pcardune]

Thanks for the merges everyone! Very much appreciated!