Question

我正在尝试在Angular 6应用程序中动态创建嵌套的FormArray。

我有一个报价，里面有多个报价项目

export class Quote {
    quoteId: number;
    quoteItems: QuoteItem[]
    status: string;
}

export class QuoteItem {

    quoteItemId: number;
    description: string;
    quoteItemDetails: QuoteItemDetail[]
}

export class QuoteItemDetail {        
    quoteItemDetailId: number;
    rate: number;
    quantity: number;
    total: number;
}

我有一个包含Quote对象的表单，用户可以在其中单击按钮以添加和删除一个或多个QuoteItem。

这是我初始化表单的代码：

ngOnInit() {
    this.quoteForm = this.fb.group({
        status: [''],
        quoteItems: this.fb.array([])
    });
    this.addQuoteItem();
}

这就是我如何动态添加和删除工作的方式：

get quoteItems() {
    return this.quoteForm.get('quoteItems') as FormArray;
}  

addQuoteItem() {
    this.quoteItems.push(this.fb.group({
        description: '',
        quoteItemDetails: this.fb.array([])
    }));
}


removeQuoteV2Item(index) {
  this.quoteV2Items.removeAt(index);
}

还有我的html：

<div formArrayName="quoteItems">

    <div @items *ngFor="let item of quoteItems.controls; let contentIndex=index" [formGroupName]="contentIndex">
        <input type="text" formControlName="description">
    </div>
</div>

<p>
  <a (click)="addQuoteItem()">Add Quote Item</a>
</p>

然后我想做的就是具有相同的功能，但是QuoteItemDetail数组却没有。因此，用户可以添加一个或多个QuoteItems，并在其中添加一个或多个QuoteItemDetails。

我真的停留在第一点，我不知道如何获取表单数组评估器，这不能作为示例，因为我不确定如何跨索引传递： / p>

get quoteItemDetails() {
  return this.quoteItems.get('quoteItemDetails') as FormArray;
}

Answer 1

您将无法使用访问器执行此操作。访问器将为您提供对一个属性的引用。但是正如您所说，在这种情况下，您需要一个索引来指定所需的quoteItemDetails FormArray引用（据我所知，您在每个quoteItem中都需要一个FormArray，因此每个quoteItem可以有多个quoteItemDetails，对吗？）。

我看不出有什么问题。而不是像使用quoteItems那样使用访问器来执行此操作，而必须使用采用需要的一个参数（即索引）的方法来执行此操作。像这样：

quoteItemDetails(quoteItemIndex: number): FormArray {
  return this.quoteItems.at(quoteItemIndex).get('quoteItemDetails') as FormArray;
}

然后将其表示在模板上

<div formArrayName="quoteItems">

  <div @items *ngFor="let item of quoteItems.controls; let contentIndex=index" [formGroupName]="contentIndex">
    <input type="text" formControlName="description">
    <div *ngFor="let quoteItemDetail of quoteItemDetails(contentIndex).controls; let detailIndex=index" [formArrayName]="detailIndex">
      <input type="number" formControlName="description" />
    </div>
  </div>
</div>

希望这对您有所帮助。我还没有测试代码，但是解决方案应该遵循这些原则。

Angular中的嵌套反应形式

1 个答案: