angular-checklist icon indicating copy to clipboard operation
angular-checklist copied to clipboard

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

Open billyjov opened this issue 5 years ago • 4 comments

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

billyjov avatar Jul 11 '19 22:07 billyjov

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:

  • CVA for atomic and domain-independent controls
  • child components for logical parts of the form

Happy to hear your opinion about this!

// cc @dhhyi

fmalcher avatar Dec 18 '19 11:12 fmalcher

@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.

d3lm avatar Dec 18 '19 11:12 d3lm

@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

billyjov avatar Dec 19 '19 10:12 billyjov

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?

d3lm avatar Dec 23 '19 15:12 d3lm