Angular2-具有反应形式的嵌套组件

我已经编写了一个组件来管理我的模型（model.component.ts），我想在另外两个组件（create和show）中使用它。 在model.component中，我使用被动形式来控制值。因为我的模型需要动态管理一个列表，所以当列表发生变化时，我会重新构建这个被动表单部件

我的问题是当我从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);
    }
}

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

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

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

编辑：

---

. 您可以在

app.component.ts

中更新

loadFromNested

布尔值，以查看当我的模型直接加载到

nested.component

中，但在

app.component
中失败时，此行将执行什么操作
let categories=this.\u formBuilder.group（{}）发布模板文件…我添加了model.component.html可能错误在这一行
…formGroupName=“{{{category.type}}”…
您的
表单组
仅是您发布的吗？或者在
类别
中是否有一些组？表单组有其他字段，但不在
类别
中。奇怪的是，如果我在
model.component.ts
中调用
this.\u invoiceService.findById
，它就会工作。这行代码将做什么
let categories=this.\u formBuilder.group（{}）发布模板文件…我添加了model.component.html可能错误在这一行
…formGroupName=“{{{category.type}}”…
您的
表单组
仅是您发布的吗？或者在
类别
中是否有一些组？表单组有其他字段，但不在
类别
中。奇怪的是，如果我在
model.component.ts
中调用
this.\u invoiceService.findById
，它就会工作。