formGroup的子组件内的Angular 2 formControlName

Posted 2023-03-13

【中文标题】formGroup的子组件内的Angular 2 formControlName

【英文标题】：Angular 2 formControlName inside a child component of formGroup

【发布时间】：2017-08-12 13:21:21

【问题描述】：

我正在尝试使用响应式表单构建向导类型的表单。以下是我的代码的 sn-p

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

wizard 和 wizard-step 无需表单即可工作。

当我使用 Reactive Forms 实现它们并运行应用程序时，我看到如下错误。

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

我假设这是因为 dough formControlName 不是 pizzaForm formGroup 的直接子代。不过不确定。如果是这个原因，我该如何解决这个问题？我在每个向导步骤中都有很少的字段，我认为所有字段仍然应该属于同一个表单，这样我就可以跟踪表单的有效性。或者我应该为每个向导步骤设置不同的表单？

如果需要更多信息来理解问题，请告诉我。

【问题讨论】：

组件中有dogh 变量吗？

是的，我愿意。 ~10char

您想将一个名为“dough”的字符串传递给 [formControlName] 属性？

如果我没记错的话，

formControlName 应该绑定到一个字符串。您能否上传一个 plnkr 示例？

你是对的。我应该使用formControlName="dough" 而不是[formControlName]="dough"。我也不需要明确地创建 FormControl 面团。只需使用 FormBuilder 创建即可。谢谢！

【参考方案1】：

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