Major architecture changes coming

Hello 👋

What’s this all about?

I’d like to share a little update on ngx-sub-form on behalf of @zakhenry and myself as we’ve been pretty quiet for a while. We’ve had some work at CloudNC we needed to focus on and with the Covid-19 coming in between, we’ve all had to adapt. So if you’ve commented on an issue, made a PR or made any kind of interaction and haven’t had any answer don’t take it badly. We still care a lot about ngx-sub-form and we’ll try to get back to you asap 😸.

Better inclusion of ngx-sub-form into our planning (at CloudNC)

@zakhenry and I have been trying to build a dependency graph of all the issues, order and prioritize them in order to start including some of them as part of our work time (during our sprints 🙌). We hope to tackle some tech debt on ngx-sub-form pretty soon 💪.

New architecture

I spent a whole day thinking about all the issues, how they connect to each others, how to solve one without adding unwanted behavior, etc. The following lead me to think that we need to rework on the architecture of the project and make major changes.

From what I’ve found, concepts will remain the sames but:

• Internal of the lib will be (nearly) fully rewritten to be more flexible and hopefully simpler ✨
• Public API would also have some changes but more like moving things around rather than the need to rewrite all your forms from the ground up! 😸

Changes

Let’s start with a rough diagram of the new internal data flow. Please don’t focus too much on this yet, I’ll refer to it point by point explaining what’s new and what it’ll bring:

the image has a good quality, if it’s not big enough open it in its own tab

Creating a sub/remap/root form component

First big change: Lets get rid of inheritance 👍.

Here’s how a basic sub form would look like with the new API:

@Component({
  // all the usual
})
export class SubFormComponent {
  public subForm: SubForm = createSubForm<YourSubFormType>(this, {
    formControls: {
      prop1: new FormControl(),
      prop2: new FormControl(),
    },
  });
}

Related issue:

• https://github.com/cloudnc/ngx-sub-form/issues/160 & https://github.com/cloudnc/ngx-sub-form/issues/82 (would be fixed)
• https://github.com/cloudnc/ngx-sub-form/issues/144 (would be obsolete)
• https://github.com/cloudnc/ngx-sub-form/issues/123 (would be easy to implement)
• https://github.com/cloudnc/ngx-sub-form/issues/133 (would come for free as the options are passed through an object which we can type correctly)

Stop using internally { emitEvent: false } every time we interact with the public form group

Internally the biggest issue we face is how to apply changes to our form group when required by the parent (through writeValue or even setDisabledState for example) without broadcasting those values straight up to the parent.

When the value of the model changes upstream, we want to put it into the form group, wait for the user to update the form, and for every subsequent changes broadcast the value up. In order to achieve this, we previously used { emitEvent: false }:

https://github.com/cloudnc/ngx-sub-form/blob/00aea19134ba253a8244e1662f4fd985234449c2/projects/ngx-sub-form/src/lib/ngx-sub-form.component.ts#L108-L110

https://github.com/cloudnc/ngx-sub-form/blob/00aea19134ba253a8244e1662f4fd985234449c2/projects/ngx-sub-form/src/lib/ngx-sub-form.component.ts#L118-L119

https://github.com/cloudnc/ngx-sub-form/blob/00aea19134ba253a8244e1662f4fd985234449c2/projects/ngx-sub-form/src/lib/ngx-sub-form.component.ts#L245-L250

https://github.com/cloudnc/ngx-sub-form/blob/00aea19134ba253a8244e1662f4fd985234449c2/projects/ngx-sub-form/src/lib/ngx-sub-form.component.ts#L271-L273

https://github.com/cloudnc/ngx-sub-form/blob/00aea19134ba253a8244e1662f4fd985234449c2/projects/ngx-sub-form/src/lib/ngx-sub-form.component.ts#L422-L426

This way, the changes would be reflected on the form but our internal subscription to formGroup.valueChanges wouldn’t be triggered straight away when writeValue is called.

Unfortunately, this led to some (annoying) issues:

• https://github.com/cloudnc/ngx-sub-form/issues/143 (would be fixed)
• https://github.com/cloudnc/ngx-sub-form/issues/86 (would be fixed)

How is the upgrade going to work?

We’ll try to make the upgrade as smooth as possible by deprecating the old way of using ngx-sub-form through classes and expose the new functions once they’re ready. This should let you do an incremental update if you’ve got a lot of components using ngx-sub-form. (and don’t worry, we have ~120 components which extends Ngx*FormComponent so we’ll have to go through that ourselves 😅!)

We’ll create a next branch were we’ll be able to make pre-releases on CI so that we can thoroughly test internally that everything is fine before publishing it for good 👍 and ask for some help from the community to see if everything is fine for everyone!

The first target will be to reach features parity. Once we reach that objective we should be able to cut a release (a feature release, not a breaking change 👌). From there, already quite a few issues should be solved and we should be able to move on to new issues.

How can you help?

• You’ve been using ngx-sub-form in your project(s)?
  (Please let us know here https://github.com/cloudnc/ngx-sub-form/issues/112 😸)

• You have ideas that we should take into account during the rewrite?

• You’re keen to help for review once the PR is out?

• Have anything interesting to share?

Please comment directly on this issue so that we can all end up with a good way of working with our forms 😃!

Following is just the Excalidraw backup for the schema ngx-sub-form-new-architecture.zip

[maxime1992]

Good evening everyone 👋

Looks like after a year and a half… We’re finally merging this 🎉

Feel free to give us some feedback how the new API is working out for you. Hope you enjoy the bug fixes and the switch from inheritance to a function createForm (see updated README!) 😸.

Thanks to everyone who participated in this thread to give feedback and ideas 👏 and a big thanks for all your patience as well 🙏!

[maxime1992]

@Waterstraal I’ve raised a MR to add support for Angular 13 and avoid the ngcc step for ngx-sub-form 😃

Note: This MR targets the feat-rewrite branch (the one published on the beta channel).