ネストされたngforでテンプレートを使用する

Question

Angular4 ReactiveForm（使用しているバージョン）を使用してフォームを作成します。 どこにコード、年、カテゴリのリストがあるフォームがありますか？

メインフォーム：

• コード
• 年
• カテゴリー[]
  • コード
  • DESC
  • 注文
  • 商品[]
    • コード
    • DESC
    • 価格

しかし、私は次のようにフォーム、カテゴリリストと各カテゴリの製品を表示しようとしているだろうすべての行であり、すべて同じテーブル（例）に表示されます。

<input code> 
<input year> 
<table> 
<tr>Category 1</tr> 
<tr>Product 1.1</tr> 
<tr>Product 1.2</tr> 
<tr>Product 1.3</tr> 
<tr>Category 2</tr> 
<tr>Product 2.1</tr> 
<tr>Product 2.2</tr> 
</table> 
<button addNewCategory /> 
<button addNewProduct /> 

私は行としてカテゴリを表示することができたが、私は、カテゴリ行の下の行として、各カテゴリの製品を表示することはできません。

マイtypescriptですフォーム：

ngOnInit() { 
    this.form = this._fb.group({ 
     code: ['', Validators.required], 
     year: ['', Validators.required], 
     categories: this._fb.array([this.initCategory()]) 
    }); 
} 

initCategory() { 
    return this._fb.group({ 
     code: ['', Validators.required], 
     desc: ['', Validators.required], 
     order: ['', Validators.required], 
     products: this._fb.array([this.initProduct()]) 
    }); 
} 

initProduct() { 
    return this._fb.group({ 
     code: ['', Validators.required], 
     desc: ['', Validators.required], 
     price: ['', Validators.required] 
    }); 
} 

検索、私は言われましたngforテンプレートを使用するには使用できませんが、使用しようとするとテンプレートタグ内のコンテンツは表示されません。

divを使用すると、各カテゴリの下に商品を表示できます。しかし、テーブルの中ではうまく動作しません。

マイテンプレート：templateはV4で非推奨になったため、すべての

<div> 
<form [formGroup]="form"> 
    <input type="text" formControlName="code" /> 
    <input type="text" formControlName="year" /> 
    <table> 
     <div formArrayName="categories"> 
     <template *ngFor="let category of form.controls['categories'].controls; let i=index"> 
      <tr> 
       <td><input type="text" formControlName="code" /></td> 
       <td><input type="text" formControlName="desc" /></td> 
       <td><input type="text" formControlName="order" /></td> 
      </tr> 
      <div="products"> 
      <template *ngFor="let product of category.controls['products'].controls; let j=index"> 
       <tr> 
        <td><input type="text" formControlName="code" /></td> 
        <td><input type="text" formControlName="desc" /></td> 
        <td><input type="text" formControlName="price" /></td> 
       </tr> 
      </template> 
      </div> 
     </template> 
     </div> 
    </table> 
</form> 
</div> 

Answer 1

まず、あなたはng-templateを使用する必要があります。おそらく

ブラウザのコンソールに見れば、あなたはこのようなエラーが表示されます：あなたはformGroupNameでcategoryをラップする必要があり、それを修正するには

ERROR Error: Cannot find control with path: 'ARRAY_NAME -> FORM_CONTROL_NAME'

：

<tr [formGroupName]='i'> 
    ... 
</tr> 

そしてproductsのために：

<div="products" formArrayName="products"> 
    ... 
     <tr [formGroupName]='j'> 
     ... 
     </tr> 
    ... 
</div> 

componentファイルで正しくヒンジしてください。