Formarray inside formArray in angular 4

Question

I am trying to implement formarray inside formarray but its not working, tried below too but doesn't work.

How to get FormArrayName when the FormArray is nested in another FormArray?

could someone please help me where am i doing wrong in below code

HTML

<div [formGroup]="MainFormGroup" class="custom-auto-complete">
  <mat-radio-group matInput formControlName="Applies">
    <mat-radio-button *ngFor="let applie of applies" [value]="applie.id">{{applie.value}}</mat-radio-button>
  </mat-radio-group>           
  <div formArrayName="FormArrayOne">
    <div *ngFor="let mains of MainFormGroup.get('FormArrayOne')['controls']; let i=index">
      <div [formGroupName]="i">
        <mat-icon *ngIf="MainFormGroup.get('FormArrayOne').length > 1" (click)="removeMarket(i)">remove_circle</mat-icon>
        <mat-icon (click)="addOne()"> add_circle</mat-icon>
        <mat-form-field>
          <input matInput formControlName="OneField" value="">
        </mat-form-field>
        <div formArrayName="FormArrayTwo">
          <div *ngFor="let Market of MainFormGroup.get('FormArrayTwo')['controls']; let j=index" >
            <div [formGroupName]="j">            
              <mat-form-field class="formfieldsControl">
                <input matInput formControlName="Destination">
              </mat-form-field>
            </div>
          </div>
        </div>         
      </div>
    </div>
  </div>    
</div>

TS

public ngOnInit() {
  this.MaintFormGroup = this._fb.group({
    Applies : '',
    FormArrayOne: this._fb.array([
      this.initArrayOne(),
    ])
  });
}
public initArrayOne() {
  return this._fb.group({
    OneField: '',
    FormArrayTwo : this._fb.array([
      this.initFormArrayTwo()
    ])
  });
}
public addMarket() {
  const control = <FormArray> this.MaintFormGroup.get('FormArrayOne');
  control.push(this.initArrayOne());
}
public removeMarket(i: number) {
  const control = <FormArray> this.MaintFormGroup.get('FormArrayOne');
  control.removeAt(i);
}
public initFormArrayTwo() {
  return this._fb.group({
    Destination : ''
  });
}
public addFormArrayTwo() {
  const Control = <FormArray> this.MaintFormGroup.get('FormArrayTwo');
  Control.push(this.initFormArrayTwo());
}
public removeFormArrayTwo(j: number) {
  const Control = <FormArray> this.MaintFormGroup.get('FormArrayTwo');
  Control.removeAt(j);
}

score 17 · Accepted Answer · answered Nov 06 '17 at 09:59

17

This link is more of a gist to the problem but you can take a look at this project i created on stackblitz which has deep nested forms .

answered Nov 06 '17 at 09:59

Rahul Singh

19,030
11
64
86

I am getting this error if i run the code in my local @Rahul Singh – user3419304 Nov 06 '17 at 11:08
ERROR in c:/copa/deep/src/app/app.component.ts (62,60): Property 'controls' does not exist on type 'AbstractControl'. ERROR in c:/copa/deep/src/app/app.component.ts (92,61): Property 'controls' does not exist on type 'AbstractControl'. – user3419304 Nov 06 '17 at 11:08
renamed .control ==> [control] working fine thanks – user3419304 Nov 06 '17 at 11:35
@user3419304 :) – Rahul Singh Nov 06 '17 at 12:12
Its seems your code has some bug, if u add three section and then add three options, now if we try to remove options of third its not working now able to remove – user3419304 Nov 06 '17 at 12:54
1

@user3419304 fixed it – Rahul Singh Nov 06 '17 at 13:20
Nice example. Thank you for that. But how do i fill that with data on init. Let's say with 3 sections and random numbers of options.... Thank you in advance – user1714346 Jun 28 '18 at 10:44
1

Thanks, it still working well today (Angular 10) :) Just need to cast the whole controls each times on functions `addQuestion`, `add` and `removeQuestion`. – Alexis Jul 19 '20 at 15:53
if you type in some text into the inputs for question, as question 1 and then add another question as question 2. the delete of q2 actually deletes q1. – tdios Sep 20 '21 at 20:07

Formarray inside formArray in angular 4

1 Answers1

Linked