ControlValueAccessor with FormArray in Angular

Question

How can I pass down the formArray to child article component?

The article component does not have a formgroup (defined in parent) and I get an error: Error: formArrayName must be used with a parent formGroup directive

ParentComponent

ListComponent
- ListItemComponent

// structure:
form = new FormGroup({
    articles: new FormArray([])
}

<articles-list [articles]="articles" formArrayName="articles"></articles-list>

<article [formControlName]="article.id" *ngFor="let article of articles" [article]="article"></article>

form structure should be:

parent {
 articlesList: article[]
}

Eliseo · Accepted Answer · 2020-10-29 14:36:42Z

1

when pass a FormControl/or FormArray to a component, the component can implements ControlValueAssesor -the is like another input-, or we can pass the FormControl/FormArray itseft -nor formArray name-.

When we use an FormArray is advisable use a getter in .ts

articlesFormArray get()
{
    return this.form.get('articles') as FormArray
}

So, you can pass as argument the formArray

<articles-list [myFormArray]="articlesFormArray"></articles-list>

And in articles-list

@Input() myFormArray:FormArray

//create a new getter to get the FormGroup of the formArray, 
get formGroup(i)
{
    return myFormArray.at(i) as FormGroup
}

<div *ngFor="let control of myFormArray.controls;let i=index">
     <div [formGroup]="formGroup(i)">
          <input formControlName="articleId">
     </div>
</div>

Is our children mannage a FormGroup, you can pass the formGroup, imagine in the example before a children-component

@Input('group') form:FormGroup //<--the name is group, but the variable "form"
                               //it's only show a characteristic of Inputs
<div [formGroup]="form">
  <input formControlName="articleId">
</div>

We can replace use in articles-list.html

<div *ngFor="let control of myFormArray.controls;let i=index">
     <children-component [group]="formGroup(i)">
</div>

answered Oct 29, 2020 at 14:36

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mackelito Over a year ago

One issue I have with this approach is that it requires custom @Inputs.. should it not be possible to use the form directives like formGroup? I'm aiming for reusability here so I would perfere if the form could be defined in the top parent and then using CVA to attach the data from children..

Eliseo Over a year ago

In this case you can create a custom form control -this form control can store an array or an object if you want- but in this case your component must implements ControlValueAccesor.

Ross · Accepted Answer · 2020-10-29 14:43:38Z

1

Make sure to nest your articles-list component inside of a [formGroup].

<form [formGroup]="form">
    <articles-list [articles]="articles" formArrayName="articles">
    </articles-list>
</form>

    
<!-- You can try something like this - just incorporate your custom components ->
<form [formGroup]="form">
    <div formArrayName="articles">
        <div *ngFor="let child of form.controls.articles.controls; let i=index;">
            <div class="form-group stagger" formGroupName="{{i}}">
                <input formControlName="sampleField" />
            </div>
        </div>
    </div>
</form>

edited Oct 29, 2020 at 14:43

answered Oct 29, 2020 at 14:15

Ross

1263 bronze badges

4 Comments

Mackelito Over a year ago

It is.. but the formGroup is in the parent and in the listcomponent only a formarrayname

Mackelito Over a year ago

Do I need to create a formgroup in both the parent and children?

Ross Over a year ago

@Mackelito I've updated my answer - give this a try and it should work.

Mackelito Over a year ago

It works if everything is in the same file and no children components

Collectives™ on Stack Overflow

ControlValueAccessor with FormArray in Angular

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related