Angular 嵌套表单数组映射问题

Question

我正在嵌套 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, 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 文件:

<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 文件中看起来没问题，有人可以建议吗？

Answer 1

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

Angular 嵌套表单数组映射问题

Angular nested form array mapping issue

angular

angular-reactive-forms

formarray