角度嵌套表单数组映射问题

问题描述

我正在嵌套 2 个表单数组，但不幸的是我收到此错误： Cannot find control with path: 'answers -> affectedCategories'

我正在使用 angular 反应形式，在我盯着嵌套形式数组之前，这些形式还可以。

TS 文件：

  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,answers: this.formBuilder.array([]),isHidden: this.formBuilder.array([])
    });
    this.createAnswer();
  }

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

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

HTML 文件：

<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>

这是我遇到问题的代码部分：

      <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>

我正在重复与第一个“外”循环相同的代码，这很奇怪，因为在 ts 文件中它看起来不错，有人可以建议吗？

解决方法

从你的 ts 可以看出路径应该不是 'answers -> affectedCategories' 而是 'answers -> ${i} -> affectedCategories'。要使您的模板搜索该路径，您应该将元素 <ng-container formArrayName="affectedCategories"> 放入元素 <ng-container [formGroupName]="i">。