Escape hatch

[mmmichl]

It would be great to have a possibility to "break out" of formly at some point in the structure. No matter how hard you try to harmonize forms, there will always be a situation, where you need to implement something very specific to this one form.

For example:

• display one field differently
  e.g. have a password strength indicator next to your input field
• have some additional information printed
  e.g. an icon with an explanation what this section is for in specific
• a rendering based on the form input
  e.g. the shipping address as it will be printed on the package

Our Current Solutions

We defined various "output" fields as a solution for some of the above situations. E.g. one will display a static text or static html. This worked for some time until we needed to use an angular component. Then we crafted a field, which accepts a template reference. With this we managed to make some static renderings with angular components.

So we found various, creative solutions to implement what we need, but it felt like we were fighting against the framework.

Solutions

As the described problems are diverse, one could find some unique solution for each. But I think some general, well designed "escape hatch" could fit all problems.

By the way, most likely you could define a new field or wrapper as a solution for the problems described. But I am strongly against this approach, as you would "pollute" the global config with fields, which are needed at exactly one place.

Idea 1: Component type

Be able to configure a component, which will be rendered instead of a predefined field. The component will get the current form and model either by a service or input parameter. With this you could have the freedom to define unique forms or what ever rendering you might need.

Probably it would be nice to also directly define a component also as a wrapper.

Idea 2: register per instance fields/wrappers

A maybe easier approach (but not as elegant as the above) would be to define fields/wrappers on an instance base. In this way you wouldn't pollute the global config.

Summary

I would be interested, if others are facing similar issues. If this is something you would consider for the library, I am willing to participate in the implementation.

cheers, and thanks for this library!

PS: This is the first time we are using formly on a project but, so far this is conceptually exactly what I was looking for quite some time!

[ryanjerskine]

Do you really need formly for this? We are using the ComponentFactoryResolver to load different components when they aren't something formly easily handles. So we have a container form component. This component grabs the form from the route, for example https://mysite.com/app/forms/user-name. It grabs the user-name and checks to see if this is in a list of custom components that we have. If it is, it uses the ComponentFactoryResolver to create that component and bind the appropriate input/output. Otherwise it falls back to a default formly component. Works pretty well in that we have a nice /forms/custom folder that has all of the custom forms and all you have to do is update a map to tell the ComponentFactoryResolver about any new custom form.

[aitboudad]

That's on our radar, it's just a matter of time.

The implementation doesn't require a lot of work and some part of it already possible with the current Formly version.
Here are my thoughts:

1. Passing a component through the field definition without being forced to define it as a type. The same goes for the wrappers.

{
  key: 'name',
  type: InputFieldType,
}

Note: if you need this feature asap, let me know to provide you a working example, also I may accept a PR.

2. Passing template reference Allow passing TemplateRef to template #2086, still thinking about it as I didn't find a proper way yet :) any suggestion is welcomed!

Note: it can be achieved using a custom field type that relies on CDK Portal.

3. Passing Html content which is already possible using template:

{  template: `<div>Hello Formly!</div>` }

[aitboudad]

2. Passing template reference Allow passing TemplateRef to template #2086 ...

check my proposal #2086 (comment)

[mmmichl]

sorry for the very slow answer, we had a huge deadline..

ad 1.) I like this very much! This would be definitely helpful for form specific renderings. I could try to make a PR, but I still need to get to know the library better :)

ad 2.) We actually did already something like this. We created a simple field type, where a template ref is accepted, so this is for sure helpful.

[viztastic]

@aitboudad i love the proposal in #2086. Has this already been implemented on master?

[viztastic]

PS: In the absence of ^, it would be totally amazing to get a working example! Very kind offer.

[aitboudad]

@viztastic not yet, PR welcomed!

[aitboudad]

This issue has been fixed and released as part of v6.0.0-beta.0 release.

Please let us know, in case you are still encountering a similar issue/problem.
Thank you!