CODEWITHSUNDEEP
angulartypescript
user3419304
user3419304

Reputation: 279

Formarray inside formArray in angular 4

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);
}

Upvotes: 10

Views: 20810

Answers (1)

Rahul Singh
Rahul Singh

Reputation: 19622

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 .

Upvotes: 21

Related Questions