跨组件分布的 Angular 2 形式

Question

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

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

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

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

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

---

更新:RC5 有更清晰的错误消息，感谢 peeskillet 的输入，formControlName如果自定义指令获得 FormGroup 则可以使用通过 formGroup 附上属性(property)。更新后的 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¹ 装饰器，这意味着它只会在主机注入(inject)器中寻找 ControlContainer。

老实说，在这种情况下，我不太确定在这种情况下哪个注入(inject)器被用作主机注入(inject)器，但看起来它不是带有 group 指令的注入(inject)器。可能是因为您如何设置组件。

我找到了一个解决方案，而不是使用 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...阅读有关此主题的好文章}