4

i have some form components which in fact just wrap some parts of a big formular into little pieces. I can imagine two ways to do that: a ControlValueAccessor or s simple PropertyBinding to pass in the FormControl to the sub-component.

Super-Simple-Example https://stackblitz.com/edit/angular-dt6pva

Core ideas:

...
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi: true,
      useExisting: forwardRef(() => Input01Component)
    }
  ]
})
export class Input01Component implements ControlValueAccessor  {
...

vs.

...
  @Input()
  control = new FormControl();
...

The ControlValueAccessor-way feels a bit more "right", but is more "work" as well.

The question: are there any aspects / advantages / disadvantages when using the simpler FormControl-Input-Binding?

EDIT

Think about this json structure which should be designed as form

{
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }

I would define 3 components: PersonForm, AdressForm, CompanyForm

advantages/disadvantages which comes to my head, somebody may add some points i didn't see:

FormControl-Input

  • ++simpler sub-components
  • --different properties for the usage ( i can't re-use formControl /formControlName)

ControlValueAccessor

  • ++same usage as all other input-components (formControlName)
  • --"more work" to implement
  • ??split up a large form definitions. On one hand building small components is a good point in general and i may can reuse the form-component-parts. On the other hand i "loose" the overall view of the data structure which may be send directly to a rest backend:
   peronForm = new FormGroup({
    id: new FormControl(),
    name: new FormControl(),
    username: new FormControl(),
    email: new FormControl(),
    address: new FormControl(), //>> handled by AdressComponent
    company: new FormControl() //>> handled by CompanyComponent
  });

Until now: unsure if this is good or bad :)

Thanks for helping

Christian Jansik
  • 321
  • 2
  • 8
  • Don't know about advantages/disadvantages, but I do know that when you hook up formgroups and controls, Angular hijacks all form validation (if you want it) as well as the methodology to get and set the values. FormGroups and controls work best when you want validation as it reduces all efforts to validate to be just regex expressions. – JWP Mar 26 '20 at 15:49

1 Answers1

0

The scenario is Angular Reactive Forms, with a fairly complex form, organized in sub sections.

The two approaches are not the same, and there are many differences.

However, the base question is: do each subform represent an indivisible value, or is a proper subform? Or: do you think you can have multiple validations for separate parts of each subform?

What happens inside a ControlValueAccessor is of no concern to the FormControl/FormGroup: it is the whole point of the abstraction. So, the validation and value change events are handled only at the ControlValueAccessor level.

In other words, ControlValueAccessor should be used when you have to manage a single value, whatever the structure it has (e.g. a code/value pair, a selection with a record as the selected value).

If you have a collection of fields (e.g. like the data of a user: name, surname, ecc) you are looking at a subform. You should then prefer a nested FormGroup.

Hope it helps.

Alberto Chiesa
  • 7,022
  • 2
  • 26
  • 53