ControlValueAccessor with FormArray

🚀 feature request

Relevant Package

This feature request is for @angular/forms

Description

I have a child component which deals with the `FormArray` of input controls. I want to have a formcontrol over the child component.

I want to have a custom-child component say name-list. The parent FormControl will send FormArray to name-list. Then in NameListComponent will use FormArray and manipulate according to need just like FormControl do using ControlValueAccessor.

I have searched for similar functionality, I just come across this question without legitimate answer

Example

<h1>Child</h1>
<div formArrayName="names" *ngFor="let name of names.controls; let i = index;">
 <div [formGroupName]="i" >
  <input formControlName="firstName">
  <input formControlName="lastName">
 </div>
</div>

Intention is to bind parent form with the array of input control in the child component. Also child form will have validation checks.

Describe the solution you’d like

Need a similar `interface ControlValueAccessor` like `ArrayAccessor

Describe alternatives you’ve considered

I have tried to send `formArrayName` to custom component, but it seems `writeValue(obj: any)` never called for `formArrayName`, it only works for `formControlName`.

[lazarljubenovic]

I don’t think this is a bug or missing feature; I believe you’re trying to misuse form controls.

If your child component has an array of controls, then it’s not a control. It would be an anti-pattern to have form controls inside something that’s a form control itself: this is what form groups (FormGroup) and form arrays (FormArray) have been created for. Your component is simply a component that should somehow be made aware that its controls are part of an externally created form. Not a control itself.

I haven’t checked out ngx-sub-form which @maxime1992 suggested above, but I guess it’s a nice wrapper around a technique I’ve described in this StackOverflow answer: https://stackoverflow.com/a/46025197/2131286.

Basically, if you put a formGroup, formGroupName, formArray or formArrayName on a component, then that component can pick up something called Control Container through injection. Inject ControlContainer in the reusabile component, and ControlContainer#control will give you the control, decided by formArrayName or similar.

[jorroll]

This example, combined with the code from my previous comment, does what you want it to.

<div>
  <form [formGroup]="topForm">
    <input formControlName="f1" />
    <div class="mt-3" *ngFor="let control of topForm.get('anArray')!.controls">
      <input [formControl]="control.get('field1')" />
      <input [formControl]="control.get('field2')" />
      <app-child [control]="control.get('child')"></app-child>
    </div>
  </form>
</div>

I’ll point out the obvious, you still have complete access to topForm from the parent component.

Like I have to handle lots of logic in parent component (which should be not needed manually if we have something like ArrayValueAccessor).

I’m not sure what you mean by this. What do you think a hypothetical ArrayValueAccessor would do for you?