typebytes / angular-checklist

🔥 Curated list of common mistakes made when developing Angular applications
https://angular-checklist.dev
MIT License
316 stars 66 forks source link

Content(forms): Use ControlValueAccessor to create sub-forms #51

Open billyjov opened 5 years ago

billyjov commented 5 years ago

What about add this item? May sound irrelevant for small forms, but in my opinion important for huge forms

fmalcher commented 4 years ago

I just add my 2 cents here because I think this is worth a discussion. In general we can distinguish between two ways of implementing sub-forms:

  1. ControlValueAccessor (CVA)
  2. Child component that gets the FormGroup/… passed as an Input

I would use the CVA for control-like components only. It integrates well into the lifecycle of Angular forms in the sense that you can "just use it without further knowledge". "control-like" means parts of the form that are atomic and reusable: date picker, counter control (num field with ± buttons), typeahead search, custom dropdown, slider … all fit into that category for me. I would not use the CVA approach for logical parts of the form but go for the child component way here. By logical parts I mean sections of the form that can be separated by domain knowledge and that structure the form. Think a registration form consisting of a credentials, address and preferences part. I would structure this with child components (while a specific control can still be a CVA).

Long story short, in my opinion we should use it this way:

Happy to hear your opinion about this!

// cc @dhhyi

d3lm commented 4 years ago

@billyjov Thanks for proposing this one.

I very much agree with what has been said by @fmalcher. That said, we should definitely have an item for ControlValueAccessor and aim for the above to explain when you should use it and when to favor child components with an input that receives a FormGroup.

@billyjov @fmalcher Would either of you like to work on such item? Would be great to have this part of the checklist.

billyjov commented 4 years ago

@fmalcher i agree with what you are saying. I would even name a third method using dependency injection and viewProviders.

IMO i think it would be good to show in a checkpoint that there are exactly these ways and to mention that each technique is better suited for certain use case and probably be an overhead for another cases.

But we should not forget that there are other libraries that deal with the topic of forms (e.g Strong typing not provided by Angular Forms out-of-the-box). How can we deal with it or would such libraries be possible recommendations for some use cases ?

@d3lm BTW sure i would like to contribute to this item, but will probably need some input from you experienced

d3lm commented 4 years ago

Ok cool. What input do you need from me?

In general, for items we should aim to keep them as short as possible. Items are not supposed to be blog posts and only demonstrate a problem and show the solution. So maybe we can have two items, or potentially 3, that explain individually when to use CVA or child components in general. These items can of course link to one another. For example one item for

Use ControlValueAccessors for domain-independent form controls

and another one for

Use child components for domain specific form controls

What do you guys think?