@WreckItRalph ... what is the advantage of that? Why do you suggest that at all?

@mlc-mlapis There might be scenarios where the form that needs to be created is a formArray and does not need a container, like submitting a list of { name, email}. In current scenario, it would look something like :
{ details: [ { name: 'something', email: 'someEmail' } ] }

It would be better if it could be just the array:
[{ name: 'something', email: 'someEmail' }]

@WreckItRalph ... yep, I can see that theoretical case but in reality, I have never met it.

Well.. I have met and hence the suggestion. It would be good to have.

@WreckItRalph ... yep, I can see that theoretical case but in reality, I have never met it.

It's needed, main use case for me are completely dynamic forms.
Had to wrap my FormArrays in a redundant FormGroup just to use it.

It's needed. I've met it too. But I found a solution myself. I create a FromArray into FormControl of FormGroup and then send it to server by accessing formControlName you know there I have a full array.

So it's like formgroup.controlname.myArray

I have multiple places in the current application I am working on where this would be beneficial. As a hacky work around, I am using *ngFor to iterate over the FormArray's controls, then binding them w/the [formGroup] directive. This works, but it's certainly not ideal.

It's actually needed. Same problem as @nexxado, I had to wrap it in a FormGroup.

Could we bind the [formGroup] to an ng-container ?

@blemaire Sure.

I had this problem as well. I agree on that this would be useful to have.

This is NOT a theoretical use case ein fact we encounter it every day.

Here is the simple version of the use case:

• main component has a form that has a form array
• sub component is supposed to handle the form array
• right now we have to pass both the form as well as the form path (to the array) to the sub component

By having a [formArray] directive we can:

• pass only form array to the sub component
• sub component doesn't need to know the form path and can just handle the form array itself

@WreckItRalph ... yep, I can see that theoretical case but in reality, I have never met it.

It's needed, main use case for me are completely dynamic forms.
Had to wrap my FormArrays in a redundant FormGroup just to use it.

Yes, my use case aligns with this

same use case as @ntziolis. Is this a feature you're working on or going to work on in near future? Or is there any workaround to pass formArrays into sub components without the need to pass the reference to the parent group?

I have the same use case as @ntziolis as well.

Totally agree with the described use cases. I needed this a bunch of times myself, and would love to finally see a real [formArray] directive!

For what it's worth, though, you can also pass a FormArray to the [formGroup] directive as a workaround. When using strictInputTypes this has to be cast, but in my experience it works without further problems (Stackblitz).

<form [formGroup]="$any(formArray)" *ngFor="let entry of formArray.controls; let i = index">
  <input [formControlName]="i">
</form>

I needed this a bunch of times myself, and would love to finally see a real [formArray] directive! (2)

omg where that [formArray] directive!!!! for god! we need that

we need it

Oh come on, this is common knowledge. Bumping for support.

And then let's bump it again! NEEDED! 😠

Of course it is a needed feature. I also came across a real situation where it is useful.

Yes, I can relate to usecases described here by others. I think this feature migh simplyfy development a lot.

@WreckItRalph ... yep, I can see that theoretical case but in reality, I have never met it.

Nice empathy there my friend.

Directive to iterate over a FormArray:

@Directive({
  selector: '[ngForArray]',
  standalone: true,
})
export class ngForArrayDirective implements DoCheck{
  formArray!: FormArray;
  length: number = -1;
  proxy: any;
  @Input()
  set ngForArray(value: FormArray) {
    this.formArray = value;
    this.redraw();

  }
  ngDoCheck(): void {
    if (this.length!=this.formArray.controls.length)
    {
      this.length=this.formArray.controls.length;
      this.redraw();
    }
  }
  redraw() {
    this.vcr.clear();
    this.formArray.controls.forEach((num: AbstractControl, index: number) => {
      const viewRef = this.vcr.createEmbeddedView(this.tpl);
      viewRef.context = {
        $implicit:
          num instanceof FormGroup ? (num as FormGroup) : (num as FormControl),
        index: index,
      };
    });
  }
  constructor(
    private vcr: ViewContainerRef,
    private tpl: TemplateRef<any>,
  ) {}
}

Use

  <div *ngForArray="formArray;let group;let i=index" [formGroup]="group">
    <input formControlName="id" />
    <input formControlName="name" /><button (click)="formArray.removeAt(i)">remove</button>
  </div>

<div *ngForArray="formArray2;let control">
    <input [formControl]="control" />
  </div>

stackblitz

I had this problem a couple of times, too. Is there any update on this issue except the workarounds?

I had this problem a couple of times, too. Is there any update on this issue except the workarounds?

There is no [formArray] directive but you can use [formGroup] and map it to a formArray

let's say

  export class Component {
    formArrayRef = new FormArray( [ new FormGroup( { name: new FormControl(null) } ) ] );
    
    // operations with adding or removing data from the formArrayRef 
    // and let's suppose that the form array contains form groups inside
  }

  <form [formGroup]="formArray">
    <div  *ngFor="let formGroupRef of formArrayRef.controls" [formGroup]="formGroupRef ">
      <input formControlName="name" />
    </div>
  </form>

even tho it's a bit counter intuitive to put a formArray into a [formGroup] it works 🔥

I had this problem a couple of times, too. Is there any update on this issue except the workarounds?

There is no [formArray] directive but you can use [formGroup] and map it to a formArray

let's say

  export class Component {
    formArrayRef = new FormArray( [ new FormGroup( { name: new FormControl(null) } ) ] );
    
    // operations with adding or removing data from the formArrayRef 
    // and let's suppose that the form array contains form groups inside
  }

  <form [formGroup]="formArray">
    <div  *ngFor="let formGroupRef of formArrayRef.controls" [formGroup]="formGroupRef ">
      <input formControlName="name" />
    </div>
  </form>

even tho it's a bit counter intuitive to put a formArray into a [formGroup] it works 🔥

This works, I think remember in Angular 6 or Angular 7, but not in newer version

This works, I think remember in Angular 6 or Angular 7, but not in newer version

inspired by #30264 (comment)

stackblitz example working on Angular 16:

stackblitz example working on Angular 16:

Amazing!! It's looks like Angular guys solved!! (I'm pretty sure that not worked before, but it's possible I was wrong all this long time). Thanks @ezhupa99
BTW it's unnecessary enclosed all in a <form [formGroup]=".."> (almost in Angular 16.2)

Just to clarify: The behavior here has not changed. You were always able to iterate over the controls of a FormArray and - assuming these controls are FormGroups - bind them to formGroup directives.

This feature request is about a directive that consumes FormArrays - to be consistent with FormGroups, to get the right aggregates for validity and such, and potentially to access child controls more naturally.

<form [formGroup]="formArray">

Passing a FormArray to the formGroup directive helps with some of these problems. But it also throws compiler errors since the types don't match. As I said earlier you can get around that by casting to any. Particularly with typed forms being a thing now, a typesafe solution would still be nice, though 😉🙏🏼.

Wow, it feels quite ridiculous to see this obvious issue hanging around for 3.5 years already with no official attention from the Angular team 😕