Angular 2 形式分布在组件中

Question

我正在尝试创建一个表单组件，该组件提供<form> 及其后代表单内容，即控件。我正在使用带有反应形式的 RC4。组件应该这样使用：

<my-formwizard [form]="form">
  <input formControlName="name" type="text" />
</my-formwizard>

这是一个显示实现的 plunk：http://plnkr.co/edit/OSzjDQD63lwoEsyqdLvw?p=preview

我遇到了一个异常：TypeError: Cannot read property 'setParent' of null

有没有办法实现跨多个组件的响应式表单？

---

更新：RC5 有更清晰的错误消息，并且由于 peeskillet 的输入，如果自定义指令通过 formGroup 属性附加了 FormGroup，则可以使用 formControlName。更新后的 plunk 显示了跨两个组件工作的表单：

http://plnkr.co/edit/1VfIH5AYjoe7dmizw6ss?p=preview

Answer 1

在你 Plunker 中，我不确定你为什么有 ngForm

<my-formwizard [form]="form" ngForm="form">

但那不应该在那里。我认为它甚至可以创造一种全新的形式。那应该被删除。一旦你删除它，你就会遇到另一个问题，说没有ControlContainer。 ControlContainer 是 FormGroupDirective ([formGroup])。

问题是由formControlName 引起的。如果您查看FormControlName directive 的源代码并查看构造函数，您会发现它需要ControlContainer 依赖项。但不仅如此，它还有一个 @Host¹ 装饰器，这意味着它只会在主机注入器中查找 ControlContainer。

老实说，我不太确定在这种情况下哪个注入器用作主机注入器，但它似乎不是带有表单组指令的注入器。可能是因为你是如何设置组件的。

我发现一个解决方案不是使用formControlName，而是使用[formControl]，然后传递一个FormControl 实例。 FormControlDirective 没有这个问题（它需要ControlContainer），因为它可以独立使用。

所以你可以这样做

<input [formControl]="nameCtrl" type="text" />

export class App {

  form: FormGroup;
  nameCtrl: FormControl;

  constructor(fb: FormBuilder) {
    this.nameCtrl = new FormControl('');
    this.form = fb.group({
      name: this.nameCtrl
    });
  }
}

这解决了您的问题。这是更新后的Plunker，

另请参阅：

• How to tackle creating complex form with lots of custom components? 了解一些设计理念。

---

_{1 - 请参阅Host and Visibility... 了解有关此主题的详细信息}