angular - 入力の配列を使用して Angular 2 リアクティブ フォームを作成する方法

Question

Angular 2 を学習するために独自の請求アプリを構築しています。formBuilder でモデルを作成しました。私のモデルには入力の配列 (請求書の項目) が含まれており、それがテンプレートにマップされると、エラーが発生します。(私はこの例に従いました: https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2 )。

エラー、コントローラー、およびテンプレートは次のとおりです。

エラー：

Error in create-invoice/create-invoice.html:109:19 caused by: Cannot find control with name: 'i'

コントローラ：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, Validators, FormGroup, FormArray } from '@angular/forms';
import { Subscription } from 'rxjs/Rx';

import { Client } from '../clients/client.model';
import { Invoice, InvoiceLineItems } from '../invoices/invoice.model';
import { CreateInvoiceService } from './create-invoice.service';

@Component({
  selector: 'create-invoice',
  templateUrl: 'create-invoice/create-invoice.html',
  providers: [CreateInvoiceService]
})
export class CreateInvoiceComponent implements OnInit, OnDestroy {
  private FLOAT_REGEX: string = '^[0-9]+([,.][0-9]+)?$';
  public model: FormGroup;

  constructor(
    private _router: Router,
    private _route: ActivatedRoute,
    private _createInvoiceService: CreateInvoiceService,
    private _formBuilder: FormBuilder
  ) {}

  /* more code here */

  ngOnInit() {
    this.clients = this._route.snapshot.data['clients'].data;
    this.model = this._formBuilder.group({
      rate: [85, [Validators.required, Validators.pattern(this.FLOAT_REGEX)]],
      currency: ['CAD', [Validators.required, Validators.pattern(this.FLOAT_REGEX)]],
      client: [null, Validators.required],
      lineItems: this._formBuilder.array([
        this.initLineItem(),
      ]),
      notes: [null],
      discount: [null],
      discountUnit: ['$'],
    });
  }

  ngOnDestroy() {
    this.postInvoiceSubscription.unsubscribe();
  }

  initLineItem(): FormGroup {
    return this._formBuilder.group({
      description: [null],
      quantity: [null, Validators.pattern(this.FLOAT_REGEX)],
      total: [null, Validators.pattern(this.FLOAT_REGEX)]
    });
  }

  addAnItem() {
    const control = this.model.controls['lineItems'].value;
    control.push(this.initLineItem());
  }

  /* more code here */
}

テンプレート (エラーが発生する領域):

<div class="invoice-table__body">
  <ul class="list invoice-table__list-items">
    <li *ngFor="let item of model.controls.lineItems.controls; let i = index">
      <div formGroupName="i">
        <input
          type="text"
          formControlName="description"
          class="col-sm-8"
          placeholder="Item description...">

        <input
          type="number"
          class="col-sm-2"
          formControlName="quantity">

        <p
          *ngIf="item.quantity"
          class="col-sm-2 invoice-table__line-item-total">
          {{ calculateLineItemTotal(item, item.quantity) | currency:'USD':true }}
        </p>
      </div>
    </li>
  </ul>

  <button
    type="button"
    class="btn btn--primary invoice-table__add-row-btn"
    (click)="addAnItem()">
    Add an item
  </button>
</div>