angular - Använda mall med nästlad ngfor

Skapa ett formulär med Angular4 ReactiveForm (versionen jag använder). Jag har ett formulär som har Kod, År och en lista med kategorier.

Huvudform:

• Kod
• År

• Kategorier[]

  • Kod
  • Beskrivning
  • Beställning

  • Produkter[]

    • Kod
    • Beskrivning
    • Pris

Men jag försöker visa formuläret på följande sätt, där kategorilistans och produkterna i varje kategori skulle vara alla rader, och allt skulle visas i samma tabell (exempel):

<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 />

Jag kunde visa kategorierna som rader, men jag kan inte visa produkterna i varje kategori som en rad under kategoriraden:

Mitt TypeScript-formulär:

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]
    });
}

När jag sökte, fick jag veta att jag skulle använda ngfor-mallar, men jag kan inte använda dem, när jag försöker använda dem visas inte innehållet i template-taggen.

Om jag använder divs kan jag visa produkterna under varje kategori. Men det fungerar inte så bra inuti en tabell.

Min mall:

<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>

Svar #1

Först och främst bör du använda ng-template eftersom template blev föråldrat i v4.

Förmodligen, om du tittar i din webbläsares konsol, kommer du att se ett fel som detta:

FEL Fel: Kan inte hitta kontroll med sökvägen: 'ARRAY_NAME -> FORM_CONTROL_NAME'

För att fixa det måste du omsluta category med formGroupName:

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

Och för products:

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

Det borde fungera om allt är korrekt på din component-fil.