Angular nested form array mapping issue

Question

I'm nesting 2 form arrays and unfortunately I'm receiving this error: Cannot find control with path: 'answers -> affectedCategories'

I'm using angular reactive forms which were ok until I stared nesting form arrays.

TS file:

  public questionForm: FormGroup;

  get answers(): FormArray {
    return this.questionForm.get('answers') as FormArray;
  }

  public getAffectedCategories(i: number): FormArray {
    const group = this.answers.at(i);
    return group.get('affectedCategories') as FormArray;
  }


  constructor(private store: Store<{}>, private formBuilder: FormBuilder) {
  }

  ngOnInit(): void {
    this.questionForm = this.formBuilder.group({
      description: [null, Validators.required],
      predecessorId: [null, Validators.required],
      answers: this.formBuilder.array([]),
      isHidden: this.formBuilder.array([])
    });
    this.createAnswer();
  }

  public createAnswer(): void {
    this.answers.push(this.formBuilder.group({
      description: [null, Validators.required],
      affectedCategories: this.formBuilder.array([this.formBuilder.group({
        category: [null, Validators.required],
        weight: [null, Validators.required]
      })])
    }));
  }

  public createAffectedCategory(i: number): void {
    this.getAffectedCategories(i).push(this.formBuilder.group({
      category: [null, Validators.required],
      weight: [null, Validators.required]
    }));
  }

HTML file:

<form [formGroup]="questionForm" (ngSubmit)="addQuestion()">
  <label>
    Question Text
    <input type="text" formControlName="description">
  </label>
  <label>
    Predecessor
    <select formControlName="predecessorId">
      <option [ngValue]="null" disabled>Choose predecessor</option>
      <option *ngFor="let question of questions$ | async" [ngValue]="question.id">{{question.description}}</option>
    </select>
  </label>
  <ng-container formArrayName="answers">
    <div *ngFor="let answer of answers.controls; index as i">
      <ng-container [formGroupName]="i">
        <label>
          Description
          <input type="text" formControlName="description">
        </label>
      </ng-container>
      <button (click)="createAffectedCategory(i)" type="button">add affected category</button>

Here is the part of the code I'm having the issues with:

      <ng-container formArrayName="affectedCategories">
        <div *ngFor="let __ of getAffectedCategories(i).controls; index as y">
          <ng-container [formGroupName]="y">
            <label>
              Category
              <input type="text" formControlName="category">
            </label>
            <label>
              Weight
              <input type="text" formControlName="weight">
            </label>
          </ng-container>
        </div>
      </ng-container>
    </div>
    <button (click)="createAnswer()" type="button">Add Answer</button>
  </ng-container>
  <button type="submit">Send form</button>
</form>

I'm repeating same code as with first "outer" loop, it's quite strange as in ts file it looks ok, can someone advise, please?

Please provide a working code example as a starting point, for example, an Angular project in stackblitz.com. It's then way easier to help you. Read more about it at stackoverflow.com/help/minimal-reproducible-example — user3025289
– user3025289, Commented Dec 29, 2020 at 16:37

Andrei · Accepted Answer · 2020-12-29 17:04:13Z

1

from your ts it can be seen that path should be not 'answers -> affectedCategories' but 'answers -> ${i} -> affectedCategories'. to make your template search that path, you should put element <ng-container formArrayName="affectedCategories"> into element <ng-container [formGroupName]="i">.

answered Dec 29, 2020 at 17:04

Andrei

12.8k1 gold badge16 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

Angular nested form array mapping issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related