Angular 2 formControlName inside a child component of formGroup

Question

I am trying to build a wizard type form using Reactive Forms. Following is a snippet of my code

<form [formGroup]="pizzaForm" novalidate>
    <wp-wizard navBarLocation="top">
         <wp-wizard-step title="Dough">
              <input type="text" id="dough" [formControlName]="dough">

wizard and wizard-step are working without forms.

When I implement them with Reactive Forms and run the application, I'm seeing errors like below.

Cannot find control with name: '[object Object]'

I'm assuming this is because dough formControlName is not immediate child of pizzaForm formGroup . Not sure though. If that is the cause, how do I fix this problem? I have few fields in each wizard steps and I think all the fields should still belong to the same form so I can track the form validity. Or may be I should have different forms for each wizard step ?

Please let me know if more information is required to understand the issue.

Answer 1

我错误地使用了[formControlName]而不是formControlName