Angular2 - 具有Reactive Forms的嵌套组件

Question

我已经编写了一个组件来管理我的模型（model.component.ts），我想在其他2个组件（创建和显示）中使用它。 在model.component中，我使用Reactive表单来控制值。因为我的模型需要动态管理列表，所以当列表发生变化时，我会重建这个Reactive表单部分。

我的问题是当我从show.component加载模型时，model.component不喜欢它并告诉我：

Error: Cannot find control with path: 'categories -> deco'

也许我是以错误的方式写的，所以如果你有一个解决方案对我来说会非常有帮助：）

model.component.ts

export class InvoicesModelComponent implements OnInit {

    createForm: FormGroup;
    @Input() invoice: Invoice = new Invoice();
    @Output() invoiceChange = new EventEmitter<Invoice>();

    @Output() created = new EventEmitter();

    constructor(
        private _route: ActivatedRoute,
        private _formBuilder: FormBuilder,
        private _invoiceService: InvoiceService
    ) {

    }

    ngOnInit() {
        this.createForm = this.makeFormGroup();
    }

    makeFormGroup(): FormGroup{
        let contact_group = this._formBuilder.group({
            name: ['', [Validators.required]],
            company: ['', [Validators.required]],
            job: ['', [Validators.required]],
            hotel: ['', [Validators.required]],
            email: ['', [Validators.required, CustomValidators.email]],
            phone: ['', [Validators.required]],
        });

        let categories = this._formBuilder.group({});

        return this._formBuilder.group({
            contact: contact_group,
            categories: categories,
        });
    }

    makeFormGroupCategories() {
        let categoriesGroup: any = {};
        this.invoice.categories.forEach((category, categoryKey) => {
            categoriesGroup[category.type] = this.makeFormGroupProducts(category.products);
        });

        this.createForm.setControl('categories', this._formBuilder.group(categoriesGroup));
    }

    makeFormGroupProducts(products) {
        let productsArray: any[] = [];
        products.forEach((product) => {
            productsArray.push(
                this._formBuilder.group({
                    name: [product.name, [Validators.required]],
                    quantity: [product.quantity, [Validators.required]],
                    days: [product.days, [Validators.required]],
                    coefficient: [product.coefficient, [Validators.required]],
                    amountHT: [product.amountHT, [Validators.required]],
                })
            );
        });
        return this._formBuilder.array(productsArray);
    }
}

model.component.html

<md-card-content>
    <div formGroupName="categories">
        <md-tab-group (selectChange)="setCategoryActiveTab($event)" dynamicHeight="true">
            <md-tab *ngFor="let category of invoice.categories" formGroupName="{{category.type}}" label="{{category.name}}">
                <div>
                    <div *ngFor="let product of category.products; let i=index" formGroupName="{{i}}">
                        <div>
                            <md-input-container floatPlaceholder="never">
                                <input mdInput type="text" placeholder="Name" name="row_name" formControlName="name" [(ngModel)]="product.name" />
                            </md-input-container>
                        </div>
                        <div>
                            <md-input-container floatPlaceholder="never">
                                <input mdInput type="text" placeholder="Quantity" name="product_quantity" formControlName="quantity" [(ngModel)]="product.quantity" />
                            </md-input-container>
                        </div>
                        <div>
                            <md-input-container floatPlaceholder="never">
                                <input mdInput type="text" placeholder="Days" name="product_days" formControlName="days" [(ngModel)]="product.days" />
                            </md-input-container>
                        </div>
                        <div>
                            <md-input-container floatPlaceholder="never">
                                <input mdInput type="text" placeholder="AmountHT" name="product_amountHT" formControlName="amountHT" [(ngModel)]="product.amountHT" />
                            </md-input-container>
                        </div>
                        <div>
                            <md-input-container floatPlaceholder="never">
                                <input mdInput type="text" placeholder="Coefficient" name="product_coefficient" formControlName="coefficient" [(ngModel)]="product.coefficient" />
                            </md-input-container>
                        </div>
                        <md-input-container floatPlaceholder="never">
                            <input mdInput disabled type="text" name="product_totalHT" value="{{ product.totalHT | number:'2.2-2' | replace:',':' ' }} €" />
                        </md-input-container>
                        <button md-icon-button (click)="removeProduct($event, product, category)"  mdTooltip='Remove {{product.description}}'>
                            <md-icon> clear </md-icon>
                        </button>
                    </div>
                </div>
            </md-tab>
        </md-tab-group>
    </div>
</md-card-content>

show.component.ts

export class InvoicesShowComponent implements OnInit {

    invoice: Invoice = new Invoice();

    @ViewChild(InvoicesModelComponent) invoicesModelComponent: InvoicesModelComponent;

    constructor(
        private _router: Router,
        private _route: ActivatedRoute,
        private _invoiceService: InvoiceService
    ) {
    }

    ngOnInit() {
        let id = this._route.snapshot.params['id'];
        this._invoiceService.findById(id)
            .then((invoice: Invoice) => {
                this.invoice = invoice;
                this.invoicesModelComponent.makeFormGroupCategories();
            })
        ;
    }

}

show.component.html

<client-invoices-model [(invoice)]="invoice"></client-invoices-model>

编辑： Here is my plunker。您可以在loadFromNested中更新app.component.ts布尔值，以便在我的模型直接加载到nested.component但是从app.component失败时查看工作情况。