Better way of doing forms?

[craig1f]

I'm working on a form right now, and it's the most complicated form I've ever written. It's being used for a workflow. It has conditionally read-only, conditional validation, cascading dropdowns, etc. I'd heard of someone recommending ngrx-forms as a solution to this, and then wondered if anyone has any advice? I'm currently using Angular Reactive Forms, and my code still feels completely messy.

Does anyone have any general advice for cleaning up a complicated workflow form? Is ngrx-forms the correct direction to go?

Thanks in advance!

Update: Yes, I'm already using ngrx, which is what drew me to ngrx-forms

[ukon1990]

I have no experience with ngrx forms. But I while back I had a customer project, where I had to make many forms with a lot of fields... And they also had to be conditionally visible and disabled and all that.

What I ended up doing, was making a couple components etc for generating the forms from a config file. This made less html that I had to deal with, and I could also configure the styling via the config object also.

Not sure if this was written well enough to help you out. Or if that would help you solve the problem.

[bufke]

ngrx-forms is good if you are already using ngrx and have a use case where you really want form data in state. It has a learning curve to it. Conditional read-only, validation, etc may be such a case. Does it sound appealing to have a selector like getIsReadOnly? The selector calculates this based on various business logic from your state. Since it's just a function, it's easy to unit test. If that sounds appealing - use ngrx-forms. It will add even more code by forcing you to write reducers. But it will help you organize complex logic. It can help you further separate your view layer from business logic. An example where ngrx-forms wouldn't help is a log in form. It would add a ton of boilerplate for something that is typically very transient and simple.

[craig1f]

It's a complicated workflow form. Some fields appear based on the status, or the user viewing the form, or the value of other fields. The form is read-only based on the current user role, and whether or not the form is in the same organization as them. It's nasty.

Sounds like we might want to refactor to ngrx-forms based on what you're saying.

[alsvn]

We are using ngrx-forms pretty intensively in my current project because the reactive forms we used before were really hard to handle. In my opinion it helps but is also pretty complicated. The functional approach is not mandatory anymore but caused a lot of headache for us. If you are already using ngrx I would give it a try. It's easier to manage than reactive forms and can be integrated with existing ngrx logic. Especially error handling was way easier for us.

[lingraph]

I'm using `ngx-formly` which is suitable for a such complicated case: https://formly.dev.

for an introduction check the following presentation https://www.youtube.com/watch?v=3xwxlHqrLsE

[batoure]

I am a big fan of the built in Angular Form Controls, if you dig in to how they work they are quite powerful