无法让 Angular 动态嵌套 FormArray 工作

Question

我正在尝试制作一系列书籍，其中每本书都有多个作者，我可以添加或删除这些作者

我正在尝试学习 Angular，并且遇到需要将一个数组嵌套在另一个数组中的需求。

我正在尝试编写一系列书籍，其中每本书都有一系列作者。 我不断收到错误：

无法找到路径控制：'书籍 -> 0 -> 作者 -> 0

这是我的 ts 代码：

import { Component, Inject, OnInit } from '@angular/core';
import {FormArray, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';



import {STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';

/**
 * @title Stepper that displays errors in the steps
 */
@Component({
  selector: 'app-home',
  templateUrl: 'home.component.html',
  styleUrls: ['home.component.scss'],
  providers: [
    {
      provide: STEPPER_GLOBAL_OPTIONS,
      useValue: {showError: true},
    },
  ],
})
export class HomeComponent implements OnInit {

  bookForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.bookForm = this.fb.group({
      books: this.fb.array([])  // Create an empty FormArray for books
    });
  }

  ngOnInit(): void {
      this.createBook()
  }

  get books() {
    return this.bookForm.get('books') as FormArray;
  }

  addBook() {
    this.books.push(this.createBook());
  }

  removeBook(index: number) {
    this.books.removeAt(index);
  }

  createBook() {
    return this.fb.group({
      title: ['', Validators.required],
      authors: this.fb.array([this.createAuthor()])  // Initialize with an empty author control
    });
  }
  
  createAuthor() {
    return this.fb.control('', Validators.required);
  }
  
  

  getAuthors(bookIndex: number) {
    return this.books.at(bookIndex).get('authors') as FormArray;
  }

  addAuthor(bookIndex: number) {
    const book = this.books.at(bookIndex) as FormGroup;
    const authors = book.get('authors') as FormArray;
    authors.push(this.createAuthor());
  }
  
  removeAuthor(bookIndex: number, authorIndex: number) {
    const book = this.books.at(bookIndex) as FormGroup;
    const authors = book.get('authors') as FormArray;
    authors.removeAt(authorIndex);
  }
  

  

  onSubmit() {
    if (this.bookForm.valid) {
      // Handle form submission
      console.log(this.bookForm.value);
    }
  }
 
}

这是我的 HTML 代码：

<form [formGroup]="bookForm" (ngSubmit)="onSubmit()">
    <div formArrayName="books">
      <div *ngFor="let book of books.controls; let bookIndex = index">
        <div [formGroupName]="bookIndex">
          <div>
            <label>
              Book Title:
              <input formControlName="title">
            </label>
            <button type="button" (click)="removeBook(bookIndex)">Remove Book</button>
          </div>
          <div formArrayName="authors">
            <div *ngFor="let author of getAuthors(bookIndex).controls; let authorIndex = index">
              <div [formGroupName]="authorIndex">
                <label>
                  Author:
                  <input formControlName="authorName">
                </label>
                <button type="button" (click)="removeAuthor(bookIndex, authorIndex)">Remove Author</button>
              </div>
            </div>
            <button type="button" (click)="addAuthor(bookIndex)">Add Author</button>
          </div>
        </div>
      </div>
      <button type="button" (click)="addBook()">Add Book</button>
    </div>
    <button type="submit">Submit</button>
  </form>
  

Answer 1

FormArray 可以是 FormGroup 的 FormArray（存储对象数组）、FormControls 的 FormArray（存储字符串、数字、日期、布尔值......的数组）或 FormArrays 的 FormArray（存储数组的数组）

1.- 如果您的

authors

是 FormControls 的 FormArray（仅存储名称），您需要更改 .html

    <div formArrayName="authors">
        <div *ngFor="let author of getAuthors(bookIndex).controls; let authorIndex = index">
            <!--you not use <div [formGroupName]="authorIndex">-->
            <label>
              Author:
              <!-see that you use [formControlName]="authorIndex"-->
              <input [formControlName]="authorIndex">
            </label>
            <button type="button" 
                    (click)="removeAuthor(bookIndex, authorIndex)">
                  Remove Author
            </button>
        </div>
        <button type="button" (click)="addAuthor(bookIndex)">Add Author</button>
      </div>

2.- 如果您的

authors

是 formGroups 的 formArray，则您的函数创建作者应该是这样的

  createAuthor() {
    return this.fb.group({
      authorName:this.fb.control('', Validators.required)
    })
  }

注意：您可以在 component.html 的末尾写入来检查值或表单

<pre>
{{bookForm.value|json}}
</pre>